欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS小课堂:CSS边框类样式代码书写介绍
这篇文章主要为大家详细介绍了CSS小课堂:CSS边框类样式代码书写介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

前面的文章《CSS小课堂:CSS实线CSS虚线的具体写法和注意点》群里用户反响很好,因此不少用户留言想了解一下CSS如何书写边框类样式代码。其实关于边框类的样式代码也是比较简单的,我们一般会有2种的书写方式,如下:

CSS边框类样式代码书写介绍

第一种方式

border-radius:10px; /*四边弧度10像素*/

这里写得比较简洁,border-radius表示边框弧度,后面10PX直接就表示4条边的弧度都是10像素。

第二种方式

border-top-left-radius:10px;/*左上弧度10像素*/
border-top-right-radius:10px;/*右上弧度10像素*/
border-bottom-right-radius:10px;/*右下弧度10像素*/
border-bottom-left-radius:10px;/*左下弧度10像素*/

第二种代码其实就是第一种代码拆分开来书写,2种方式是一样一样的。

当然有的时候我们也可以这样写

border-radius: 2em 1em 4em / 0.5em 3em;

这里是使用的em而不是使用的像素px,关于两者的区别和联系大家可以参看《CSS小课堂:css中px、em和rem的区别》。

上面的 写法等同于:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

这里大家要区分清楚了,大家可以多尝试多实验就明白其中的关系了。

最后我们处理用像素px以及em外,还可以使用百分比来定义边框弧度样式

例如:

border-radius:10%;

具体样式这里就不截图了,大家可以自己尝试看下。

以上就是CSS小课堂:CSS边框类样式代码书写介绍的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 边框类 样式代码

上一篇CSS小课堂:CSS自定义页面滚动条

下一篇CSS小课堂:彩色文字代码定义

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在