兄弟选择器 border-radius 圆角属性各浏览器厂商对border-radius的子属性解析

最新推荐文章于 2023-02-26 13:50:13 发布

Lgw_zuiyouxiu

最新推荐文章于 2023-02-26 13:50:13 发布

阅读量139

点赞数

分类专栏：兄弟选择器 border-radius 圆角属性各浏览器厂商对border-radius的子属性解析

本文链接：https://blog.csdn.net/Lgw_zuiyouxiu/article/details/97274482

版权

兄弟选择器同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

border-radius 圆角属性

1 篇文章 0 订阅

订阅专栏

各浏览器厂商对border-radius的子属性解析

1 篇文章 0 订阅

订阅专栏

兄弟选择器
向后选不向前选
相邻兄弟选择器
E+F{属性：属性值;} 选中E元素的相邻的兄弟元素F
E和F是同级元素，并且是相邻的兄弟元素，在结构中F必须写在E的后面，选择符中E和F通过加号+连接
通用兄弟选择器
E~F{属性：属性值; 选中E元素的兄弟元素F
E和F是同级元素，并且F写在E的后面，选择符中E和F通过波浪号~连接
*/

		#box .li2+p{background: blue;}
		#box .li2:hover+p{background: green;}
		
		
		#box .li2~p{color: pink;}
		#box .li2:hover~p{color: red;}
	</style>
</head>
<body>
	<ul id="box">
		<li>li1</li>
		<p>ppp</p>
		<li class="li2">li2</li>
		<p>ppp</p>
		<p>ppp</p>
		<li>li3</li>
		<div>div</div>
		<li>li4</li>
		<li>li5</li>
		<p>ppp</p>
	</ul>

border-radius    圆角属性
			属性值：   length     %
			多个属性值书写：
				一个属性值:    四个角
				两个属性值:    左上and右下    右上and左下
				三个属性值:    左上    右上and左下    右下
				四个属性值:    左上   右上    右下   左下
			注意：
				每个角接受的最大值为当前边的长度的一半，如果值超过长度的一半，按照长度的一半算
				正方形写宽度和高度的一半就可以写出正圆，写可以 50% 也是正圆
				长方形写length的时候是按照短的边的一半为最大值，大于短的边的一半的值，按照短边的一半值算
				长方形写短边一半值的时候和写50%的时候样式不一样
				如果要重置元素没有圆角，取值none无效果，需要设置为0；
			水平角半径/垂直角半径
				border-radius: 200px 30px 70px 40px/100px 50px 70px 30px;
			单独一个角的圆角书写:
				一个值代表水平和垂直角半径一样(50px)      两个值第一个代表水平角半径，第二个代表垂直角半径(50px 30px)
				border-top-left-radius:       左上角
				border-top-right-radius:      右上角
				border-bottom-left-radius:    左下角
				border-bottom-right-radius:   右下角
			特殊应用：
				border-radius有个内半径和外半径的区别；
				      border-radius半径值小于或等于border-width(边框宽度)值时，圆角内角为直角；
				      border-radius半径值大于border-width(边框宽度)值时，圆角内角具有圆角效果，圆角半径为他们的差值；

		/*#box{width: 300px;height: 300px;background: green;border-radius: 350px;}*/
		/*#box{width: 300px;height: 100px;background: green;border-radius: 50px;}*/
		/*#box{width: 300px;height: 300px;background: green;border-radius: 50%;}*/
		/*#box{width: 300px;height: 100px;background: green;border-radius: 50%;}*/
		/*#box{width: 300px;height: 100px;background: green;border-radius: 20px 50px 30px 40px;}*/
		/*#box{width: 500px;height: 300px;background: green;border-radius: 200px 30px 70px 40px/100px 50px 70px 30px;}*/
		#box{width: 500px;height: 300px;background: green;border: 50px solid yellow;border-radius: 30px;}
	</style>
</head>
<body>
	<div id="box">
		
	</div>
	
		由于各浏览器厂商对border-radius的子属性解析不一样，造成了各浏览器下的派生子属性写法有所区别。
			1 ）gecko内核
			-moz-border-radius-topleft  左上角
			-moz-border-radius-topright  右上角
			-moz-border-radius-bottomright  右下角
			-moz-border-radius-bottomleft  左下角
			2）webkit内核
			-webkit-border-top-left-radius  左上角
			-webkit-border-top-right-radius  右上角
			-webkit-border-bottom-right-radius  右下角
			-webkit-border-bottom-left-radius  左下角
			3）presto和trident内核
			border-top-left-radius  左上角
			border-top-right-radius  右上角
			border-bottom-right-radius  右下角
			border-bottom-left-radius  左下角

	-->
</body>

Lgw_zuiyouxiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兄弟选择器 border-radius 圆角属性各浏览器厂商对border-radius的子属性解析

兄弟选择器向后选不向前选相邻兄弟选择器E+F{属性：属性值;} 选中E元素的相邻的兄弟元素FE和F是同级元素，并且是相邻的兄弟元素，在结构中F必须写在E的后面，选择符中E和F通过加号+连接通用兄弟选择器E~F{属性：属性值; 选中E元素的兄弟元素FE和F是同级元素，并且F写在E的后面，选择符中E和F通过波浪号~连接*/ #box .li2+p{ba...
复制链接

扫一扫