css3 outline为div元素添加轮廓线
有时为了样式的更加美观,可适当的为div添加轮廓线。可通过outline属性来实现。
outline 包含以下几个属性值;
outline-width:轮廓线的粗细。
此属性值包含4个参数:thin,medium,thick,length
thin:定义细轮廓;
medium:定义中型轮廓;
thick:定义粗型轮廓。
length:可以指定轮廓线的粗细,注,此值不能为负值;
outline-style:轮廓线的样式。
此属性常用参数:
none:设置为none时,轮廓将不显示.
dotted:点轮廓线,
dashed:虚线轮廓线,
solid:实线轮廓线。
outline-color:轮廓线的颜色
此属性的参数:
颜色名称:(red);
rgb颜色值:rgb(255,255,255);
十六进制颜色值:如:#ff0000;
outline-offset:轮廓线与容器的偏移值。此值为负时,将向容器内显示轮廓线。
示例代码如下:
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>无标题文档</title> <style> .aixuexi{ padding:20px; position:fixed; top:100px; left:300px; border:2px dashed #000; width:100px; height:100px; line-height:100px; background:#abcdef; outline-width:10px; outline-style:solid; outline-color:#99FF00; outline-offset:20px; } </style> </head> <body> <div class="aixuexi"><a href="#">hello world</a></div> </body> </html>
以上是css3中关于outline如何为div元素添加轮廓线的实例的详细内容。更多信息请关注PHP中文网其他相关文章!