css3 边框线

CSS3提供了丰富的边框样式，包括边框线的颜色、粗细、样式以及圆角等特性，下面分别介绍各种边框样式：

/* 设置边框宽度、样式、颜色 */border-width: 1px;
     /*边框宽度*/border-style: solid;
     /*边框样式*/border-color: #ccc;
     /*边框颜色*//* 圆角边框 */border-radius: 5px;
     /*设置圆角半径*//* 阴影边框 */box-shadow: 2px 2px 4px #ccc;
     /*设置阴影*//* 渐变边框 */border-image: linear-gradient(to right, #f00, #0f0);
     /*设置渐变*//* 双边框 */border-style: double;
     /*设置双边框*//* 透明边框 */border: 1px solid rgba(255, 255, 255, 0.5);
     /*设置透明边框*/

上述代码中，border-width设置边框宽度，可接受px、em、%等单位；border-style设置边框样式，可选值包括solid、dashed、dotted等；border-color设置边框颜色，可接受颜色、rgb、rgba等值。

border-radius设置圆角半径，可接受px、em、%等单位。box-shadow设置阴影，可接受x轴偏移、y轴偏移、模糊半径、颜色等值。border-image设置渐变边框，可接受渐变方向、颜色等值。双边框设置通过设置边框样式为double来实现。透明边框通过设置边框为rgba颜色并设置透明度值，如rgba(255, 255, 255, 0.5)。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！