一、边框样式
边框样式可以通过CSS中的border-style属性来设置。border-style有以下几个值可选：
border-style: none; /* 无边框 */
border-style: dotted; /* 点线边框 */
border-style: dashed; /* 虚线边框 */
border-style: solid; /* 实线边框 */
border-style: double; /* 双线边框 */
border-style: groove; /* 3D沟槽边框 */
border-style: ridge; /* 3D脊边框 */
border-style: inset; /* 3D嵌入边框 */
border-style: outset; /* 3D浮雕边框 */
例如，设置一个红色实线边框的DIV可以这样写：
div {
border-style: solid;
border-width: 1px;
border-color: red;
}
二、边框宽度
边框宽度可以通过CSS中的border-width属性来设置。border-width有以下几个值可选：
border-width: thin; /* 细线边框 */
border-width: medium; /* 中等线边框 */
border-width: thick; /* 粗线边框 */
border-width: 1px; /* 自定义像素宽度 */
例如，设置一个绿色粗线边框的DIV可以这样写：
div {
border-style: solid;
border-width: 5px;
border-color: green;
}
三、圆角边框
圆角边框可以通过CSS中的border-radius属性来设置。border-radius接受一个或两个长度值，分别表示水平半径和竖直半径。
例如，设置一个红色圆角边框的DIV可以这样写：
div {
border-style: solid;
border-width: 1px;
border-color: red;
border-radius: 10px;
}
四、阴影边框
阴影边框可以通过CSS中的box-shadow属性来设置。box-shadow接受四个参数，分别为水平偏移量、竖直偏移量、模糊半径和阴影大小。
例如，设置一个蓝色带有阴影效果的DIV可以这样写：
div {
border-style: solid;
border-width: 1px;
border-color: blue;
box-shadow: 2px 2px 2px #888888;
}
五、渐变边框
渐变边框可以通过CSS中的border-image属性来设置。border-image接受一张图像、一个定位值和一个用于拉伸的值。
例如，设置一个渐变边框的DIV可以这样写：
div {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(to right, #00ff00, #0000ff) 1;
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/257197.html
微信扫一扫 
支付宝扫一扫 