十四、圆角边框和阴影
**border-radius 属性用于设置元素的外边框圆角 参数可以为数值或百分比 **
**radius 半径原理： 圆与边框的交集形成的圆角效果 **
div {
width: 100px;
height: 40px;
background-color: pink;
border-radius: 10px;
text-align: center;
line-height: 40px;
}
.yuanjiao {
width: 200px;
height: 100px;
background-color: pink;
**** 圆角矩形 半径设置为高度一半****
border-radius: 50px;
}
.yuan {
width: 200px;
height: 200px;
background-color: blue;
border-radius: 100px;
}
.radius {
width: 200px;
height: 150px;
background-color: green;
**** 依次从左上角顺时针 ****
border-radius: 10px 20px 30px 40px;
**** border-radius: 10px 20px ; 这种是对角线 ****
**** border-top-left-radius: 20px 单独左上角 ****
}
CSS3中新增了盒子阴影，我们可以使用box-shadow添加阴影
语法： box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 必需 水平阴影的位置 允许负值
v-shadow: 必需 垂直阴影的位置 允许负值
blur: 可选 模糊距离
spread： 可选 阴影的尺寸
color： 可选 阴影的颜色
inset： 可选 将外部阴影改为内部阴影
注意:1.默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
2.盒子阴影不占用空间,不会影响其他盒子排列
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
**** box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); ****
}
**** 原先盒子没有阴影,当鼠标经过就有阴影 ****
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
**** text-shadow属性将文字运用于文本 ****
h2 {
font-size: 48px;
color: orange;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
}
十五、浮动基本知识
传统网页布局的三种方式
网页布局的本质一用CSS来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序)
1.普通流( 标准流 )
2.浮动
3.定位
注意:实际开发中，一个页面基本都包含了这三种布局方式
标准流(普通流/文档流)
所谓的标准流: 就是标签按照规定好默认方式排列
1.块级元素会独占一行，从上向下顺序排列
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
2.行内元素会按照顺序，从左到右顺序排列，碰到元素边缘则自动换行
常用元素:span、a、i、em等
为什么需要浮动?
总结:有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用:可以让多个块级元素一行内排列显示
网页布局第一准则: 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动.
什么是浮动?
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法:
选择器 {
float:属性值;
}
none:不浮动 left:左浮动 right:右浮动
.left
{
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.right {
height: 200px;
width: 200px;
background-color: red;
float: right;
}
浮动的特性：
1.浮动元素会脱离标准流（脱标）
脱离标准普通流的控制，移动到指定位置；浮动的盒子不在保留原先的位置
2.浮动的元素会一行内显示并且元素顶部对齐
注意:浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3.浮动的元素会具有行内块元素的特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性.
.box1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
span {
float: left;
width: 200px;
height: 300px;
background-color: green;
}
**** 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 ****
p {
float: right;
height: 200px;
background-color: red;
}
****如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 ****
