一、在style中,元素的边框有三个常用属性,中间用空格隔开:
border: width(边框粗细) style(边框样式) color(边框颜色);
举例:border:20px solid red;
就是 20px的--实心的--红色的边框。
二、border的第二个值控制边框的样式,style有三个可选值。我们可以通过改变它来实现一条实线、虚线、或者点线。
style的关键词:solid————实线边框;
dashed ---------虚线边框;
dotted ``````````点线边框;
三、border的第三个值控制边框的颜色,可以写颜色对应的英文单词,也可以用
十六进制代码控制。
(1)关键字:英文单词eg: red blue yellow green……
(2)十六进制写法:#fffff为白色,还有很多颜色,可以打开ps,从调色盘上选择需要的颜色,然后直接把颜色复制下来。
不懂得朋友看图:
复制选中部分,粘贴在你的border :10px solid #e45872;
四、边框方向
边框是四个方向,可以通过left,right,top,bottom进行控制
如:border-top:10px solid red;上边框
border-left:10px solid red;左边框——以此类推
五、边框可选择
我们也可以只设置左边框或者其他某个方向的边框。只要单独设置所需要的方向的边框的值即可。
六、圆角
实现圆角很简单,只需要设置border-radius属性。
border-radius的值越大,角越圆。
上代码
div{
width: 100px;
height: 100px;
border-radius: 10px;
background: green;
}
效果:
border-radius可以设置四个方向,分别为:左上,右上,右下,左下。
上代码
div{
width: 100px;
height: 100px;
border-radius: 10px 20px 30px 40px;
background: green;
}
效果:
好啦,自己敲代码试试看吧~