一、理论:
1.border-radius:
a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示
b.圆形:元素的宽度和高度相同,圆角的半径值50%(或高度的一半)
c.半圆:元素的宽度与圆角方位配合一致,以不同的高度比例等项即可制作半圆
d.扇形:元素的宽度、高度、半径值相同,根据圆角位置不同可制作不同的扇形
e.椭圆:需要设置圆角的水平和垂直方向的半径值
2.border-shadow:
a.none: 无阴影
b.inset: 区分内外阴影
c.x-offset:阴影水平偏移量
d.y-offset:阴影垂直偏移量
e.blur-radius:阴影模糊半径
f.color:颜色
1.border-radius:
a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示
b.圆形:元素的宽度和高度相同,圆角的半径值50%(或高度的一半)
c.半圆:元素的宽度与圆角方位配合一致,以不同的高度比例等项即可制作半圆
d.扇形:元素的宽度、高度、半径值相同,根据圆角位置不同可制作不同的扇形
e.椭圆:需要设置圆角的水平和垂直方向的半径值
2.border-shadow:
a.none: 无阴影
b.inset: 区分内外阴影
c.x-offset:阴影水平偏移量
d.y-offset:阴影垂直偏移量
e.blur-radius:阴影模糊半径
f.color:颜色
二、实践:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1{
width: 50px;
height: 50px;
background-color: #239285;
margin: 30px;
}
.div2{
width:100px;
height: 50px;
background-color: #239587;
border-radius: 50px 50px 0 0;
}
.div3{
width: 50px;
height: 100px;
background-color: #231587;
border-radius: 0 50px 50px 0;
}
.div4{
width: 100px;
height: 50px;
background-color: #219587;
border-radius: 0 0 50px 50px;
}
.div5{
width: 50px;
height: 100px;