小编给大家分享一下css如何使用border-top-right-radius属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> border-top-right-radius属性定义及用法强>
在css中border-top-right-radius属性是用来将元素右上角的边框设置为圆角边框(也可以是其它形状),该属性一般用在单独设置右上角为圆角的时候,如果我们要同时设置元素四个角为圆角时,当然我们可以使用该属性和其它三个类似该属性的属性(见下面类似属性),但是我们一般会选用border - radius属性,border - radius属性可以将四个角的设置定义在同一个声明中,这样可以省略几行代码,可读性更好。
<强> border-top-right-radius属性类似属性强>
1. border-top-left-radius属性:设置左上角为圆角或其它形状;
2. border-bottom-left-radius属性:设置左下角为圆角或其它形状;
3. border-bottom-right-radius属性:设置右下角为圆角或其它形状;
<强> border-top-right-radius属性语法格式强>
1。css语法:border-top-right-radius: 5 px 10 px
2. css语法:border-top-right-radius: 6 px
3。css语法:border-top-right-radius: 30% 80%
4. css语法:border-top-right-radius: 50%
5. javascript语法:object.style.borderTopRightRadius=? px"
<强> border-top-right-radius属性值说明强>
border-top-right-radius属性有两个属性值,如果两个属性值相同,则可以省略一个属性值,效果完全相同。当有两个属性值时:第一个属性值表示右上角形状的水平半径,第二个属性值表示垂直半径;当只有一个属性值时:该属性值表示右上角形状的水平半径和垂直半径。
<强>示例强>
& lt; !DOCTYPE html> & lt; html> & lt; head> & lt;元charset=皍tf-8"/比; & lt; title> css border-top-right-radius属性将右上角设置为圆角边框& lt;/title> & lt;风格类型=拔谋?css"比; 身体{背景:# ddd;字体大小:20 px;} #,# b, c # {margin-top: 10 px;宽度:360 px;边界:2 px固体# 0000 ff;填充:16 px;} #一个{border-top-right-radius: 56 px 36 px;} # b {border-top-right-radius: 60 px;} # c {border-top-right-radius: 20% - 80%;} & lt;/style> & lt;/head> & lt; body> & lt; div id=癮"祝辞border-top-right-radius: 56 px 36 px; & lt;/div> & lt; div id=癰"祝辞border-top-right-radius: 60 px; & lt;/div> & lt; div id=癱"祝辞border-top-right-radius: 20% - 80%; & lt;/div> & lt;/body> & lt;/html>
运行结果
以上是css如何使用border-top-right-radius属性的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!