1.实现边框
属性:border
例子:border:3px double blue;
取值:border-width,border-style,border-color
边框宽度,样式,颜色,三个值缺一不可(即使有些值具有默认值)
border-width:取值像素,设置四个方向边框宽度
border-style:边框样式
取值:solid 实线边框,dashed 虚线边框,dotted 点线边框,double双线边框
border-color:设置边框颜色,取颜色值,如果给了transparent那么就是透明
注意:1.使用border属性为元素设置边框,是同时设置上,右,下,左四个方向
2.取消默认边框, border:none(这个用法常见于按钮)2.单边框的设置
属性:1.border-top:设置顶部边框
2.border-right:设置右边边框
3.border-bottom:设置底部边框
4.border-left:设置左边边框
取值:跟border中的取值一样。3.网页三角标的制作:
1.设置空的块元素,宽高都为0
2.为元素设置等宽的边框
3.调整边框颜色,显示一个方向的边框,其余边框设置透明色(transparent)
注意:四个方向的边框缺一不可,缺少的话,边框会恢复成矩形边框,不再是三角形。4.轮廓线:
属性:outline
取值:width,style,color
取消轮廓线:outline:none;
注意:轮廓线围绕在元素内容区域四周,与边框类似,但有区别:轮廓线在网页中不占位,边框在网页中是实际占位的5.圆角边框:
1.属性:border-radius
2.取值:像素值或者百分比
1.border-radius:20px;一个值表示四个角都已20px做圆角
2.border-radius:20px 40px;取两个值的时候,按照上右下左顺时针方向设置圆角,从左上角开始一次取值,在给两个值的情况下,上下保持一致,左右保持一致。
3.border-radius:10px 20px 30px;取三个值得时候,缺少的第四个值与第二个保持一致。
4.border-radius:10px 20px 30px 40px;分别设置四个圆角程度
3.百分比取值实现元素形状改变
border-radius:50%;
注意:使用百分比设置圆角边框时,是参照当前元素的尺寸进行计算的
如果元素本身是长方形,设置50%的圆角会变成椭圆
如果元素本省是正方形,设置50%的圆角会变成正圆6.边框阴影(盒阴影)
1.属性:box-shadow
2.取值:offset-x 阴影的水平偏移距离,取像素值
offset-y 阴影的垂直偏移距离,取像素值
blur 阴影的模糊程度,值越大越模糊,取像素值
spread 阴影的延伸距离(可选),取像素值,可以扩大阴影的范围
color 阴影颜色(默认为黑色)
注意:不管是浏览器窗口中还是元素本身,都存在坐标系,都在左上角为(0,0)点,向右,向下代表x,y轴
docx python 表格边框样式 python边框代码
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的css - 边框动效按钮
交互感比较强的一个动效按钮。
动效设计 交互设计 ux/ui 动效按钮 css -
java 代码 如何预热
目录短路且与短路或?Java代码运行流程1:分支语句2:循环语句小知识点:思考:短路且与短路或?&&短路且(全部条件都要满足) 左false全false || 短路或(满足其一的条件) 左true全trueJava代码运行流程 所有代码从
java 代码 如何预热 java servlet jvm System