web前端入门到实战：边框属性（下）、边框练习

最新推荐文章于 2024-08-12 09:00:00 发布

魔方编程

最新推荐文章于 2024-08-12 09:00:00 发布

阅读量1.3k

点赞数

文章标签：前端 web前端前端教程网页制作前端开发

本文链接：https://blog.csdn.net/wewfdf/article/details/102410751

版权

本文详细讲解了web前端中边框属性的设置，包括连写方式的顺时针赋值规则和不同情况下的省略规则，并提供了一些实践例子。此外，还提及了非连写方式虽然不推荐但作为了解也是必要的。最后，文章鼓励对编程和web前端感兴趣的读者参与学习交流，提供了一份学习资源。

摘要由CSDN通过智能技术生成

一、边框属性

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>

web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）