<css 七>out-line

来源:互联网 发布:python yield什么意思 编辑:程序博客网 时间:2024/05/24 16:16

轮廓样式:(实例,附带颜色)

<!DOCTYPE html><html><head><title>outline相关</title><meta charset="utf-8"/><style type="text/css">h1,p{font-family:微软雅黑;font-size:25px;width:250px;}p.a{outline-style:none;}p.b{outline-style:dotted;}p.c{outline-style:dashed;}p.d{outline-style:solid;}p.e{outline-style:double;}p.A{outline:groove green 10px;}p.B{outline:ridge orange 10px;}p.C{outline:inset gray 10px;}p.D{outline:outset aqua 10px;}</style></head><body><h1>outline-style相关的值:</h1><p class="a">none 无轮廓</p><p class="b">dotted定义点状的轮廓</p><p class="c">dashed定义虚线轮廓</p><p class="d">solid定义实线轮廓</p><p class="e">double定义双线轮廓。双线的宽度等同于 outline-width 的值</p><p class="A">groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值</p><p class="B">ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值</p><p class="C">inset定义 3D 凹边轮廓。此效果取决于 outline-color 值</p><p class="D">outset定义 3D 凸边轮廓。此效果取决于 outline-color 值</p></body></html>

效果:


轮廓颜色:

<!DOCTYPE html><html><head><style type="text/css">p{outline-color:aqua/#00ffff/0,255,255;}</style></head><body><p>dotted定义点状的轮廓</p></body>
轮廓宽度:

p{outline-width:50px/em/cm;}注:宽度可能无法使用%作为单位。



0 0
原创粉丝点击