HTML连载37-边框属性(下)、边框练习
2019-09-17 10:01:07来源:博客园 阅读 ()
一、边框属性
1.连写(分别设置四条边的边框)
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;
注意点:
(1)这三个属性是按照顺时针来赋值的,也就是说按照上右下左来赋值,而不是按照日常生活中的上下左右
(2)关于省略
i.三个(省略左)左右一样,上下按照咱们写的
ii.两个(省略左、下)左右一样,上下一样
ii.一个(省略右、左、下)这四个全都一样
例子:
.box{ width: 500px; height:500px; background-color: red; border-width:2px 10px 15px 20px; border-style:solid dashed dotted double; border-color:blue purple black yellow; } .........省略代码......... <div class="box"> </div>
2.非连写
border-top-width:
border-top-style:
border-top-color:
border-right-width:
border-right-style:
border-right-color:
border-bottom-width:
border-bottom-style:
border-bottom-color:
border-left-width:
border-left-style:
border-left-color:
挨个设置,非常不推荐使用,代码非常冗余,没什么价值用处
二、边框属性练习
border-top-width:
border-top-style:
border-top-color:
border-right-width:
border-right-style:
border-right-color:
border-bottom-width:
border-bottom-style:
border-bottom-color:
border-left-width:
border-left-style:
border-left-color:
三、源码:
d105_border_attribute_and_exercise.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d105_border_attribute_and_exercise.html
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
原文链接:https://www.cnblogs.com/ruigege0000/p/11531124.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:纯css制作电闪雷鸣的天气图标
下一篇:纯css实现星级评分效果
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash