CSS边框

1.边框属性

1.简写方式

border:width style color;

width: 以px为单位

div{width:200px;  /*定义边框的宽度*/
height:150px;    /*定义边框的高度*/
border:2px solid rgb(153, 0, 255)} /*border:边框线像素 样式  颜色*/

</style>

style取值

solid    代表实线

dotted   代表点状虚线

dashed   代表块状虚线

#d1{width:200px;
height:150px;
border:2px solid rgb(153, 0, 255)}
#d2{width:200px;
height:150px;
border:2px dotted rgb(0, 255, 242)}
#d3{width:200px;
height:150px;
border:2px dashed rgb(153, 0, 0)}

</style>

color

取值

英文

16进制

rgb

rgba

transparent  代表透明的颜色

2.单边框定义

border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

方向取值

top

right

bottom

left

div{width:200px;
height:100px;
border-top:1px solid red;
border-right:1px dashed green;
border-bottom:1px dotted orange;
border-left:1px dashed pink;
}

3.单属性设置

语法

border-属性

属性取值

width:

style:

color:

border:0 去除边框

div{width:100px;
height:60px;
border-width:1px;
border-style:dotted;
border-color:rgba(255,0,255,0.6)}
</style>

首先进行边框大小的width和height设置,然后逐一设置border的width,style和color。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏电光石火

CSS几个竖直与水平居中盒子模型

水平居中:text-align: center; 竖直居中:line-height: 30px(30为层高)

23980
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之vertical-align

1、vertical-align基本认识   支持的属性值:     ①线类:baseline(默认),top,middle,bottom     ②文本类:t...

35050
来自专栏Python

css样式—字体垂直、水平居中

<div class="tt">啦啦啦</div> .tt{ padding: 0px; width:500px...

264100
来自专栏张俊红

网页的修饰

总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

39270
来自专栏极乐技术社区

wxss学习系列《三》背景(Background)与颜色(Color),边框(Border)

一、背景(Background)与颜色(Color) 一、背景:background。 设置对象的背景特性。一个元素可以设置多重背景图像,每组之间用逗号隔开,如...

27950
来自专栏Danny的专栏

HTML基本语法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

23120
来自专栏Android干货

自定义控件详解(一):Paint类与Canvas类

20440
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

14330
来自专栏吾爱乐享

php学习之html属性-表格(六)

44720
来自专栏菜鸟计划

css渲染(三)颜色与背景

颜色的应用主要分为前景色、背景色和透明三个部分。 一、前景色 color   color前景色   值: <color> | inherit   初始值: 用户...

36060

扫码关注云+社区

领取腾讯云代金券