兄弟选择器
向后选不向前选
相邻兄弟选择器
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>