您的位置:CSS5 > CSS笔记 >

css边框样式-拷贝代码就可以试一试掌握边框属性

发布日期:2020-02-16 20:56:28 来源:WWW.CSS5.COM.CN

边框样式可以对一般HTML标签都可以设置,并且都能成功,比如可以对p、div、ul、li、table、h1、h2、h3、span、em、strong、b、i、u等标签都可以设置border边框样式。

一、边框样式单词

border —— 单独代表对四边设置边框

border-top —— 只设置上边框

border-bottom —— 只设置下边框

border-left —— 只设置左边框

border-right —— 只设置右边框

border:1px solid #000;border-left:0 —— 设置上、右、下三边边框为实体线黑色边框。注意前后顺序。相当于先设置4条边样式,又单独后面设置哪条边另外样式,这样节约代码技巧。

二、边框语法

边框样式一般同时设置3个值,值与值之间需要一个空格。

三个值分别是:线宽度、线体样式、线颜色

如:border:1px solid #000

即:

1px代表:设置边框线宽1px;

solid 代表:设置线体样式;

#000代表:设置边框颜色

三、边框虚线与实线

边框有实体线和虚线、短虚线三者常用的边框线样式,其它线体样式兼容不好。

分别是:

solid —— 实体线

dashed —— 虚线

dotted —— 短虚线

以上三个是边框常用的线体样式。

四、边框颜色代码简写

以前边框三个值都是否开单独,后来简写代码节约代码,兼容和效果相同,同时css5也推荐使用简写代码。

原来:

border-color:#000; border-style:solid; border-width:1px

现在简写:

border:1px solid #000

这样节约很多代码。当然三个值需要空格隔开,同时这3个值不分顺序,效果兼容一样。

border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px

简写:

border-bottom:#000 1px solid

以上对边框border样式各种用法、各种技巧进行介绍,可以轻松掌握css 边框的用法。

重要说明:当然对边框设置阴影、边框设置圆角又是另外css样式而非此边框样式。

标签(Tag): css 边框
本文分享URL地址:https://www.css5.com.cn/biji/1623.shtml

作者:CSS5原创

上一页:上一篇:div加边框样式的实例
下一页:下一篇:html 下划线标签与CSS下划线样式