一、圆角：
1、border-radius 圆角
一个值/四个值/每个值拆分成两个方向值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<style>
.btn {
width: 100px;
height: 30px;
line-height: 30px;
background: pink;
text-align: center;
/* border-radius: 10px; */
/*相当于：border-radius: 10px 10px 10px 10px;*/
/*四个值可以分别设置：宽高值相同效果图为圆弧*/
border-radius: 10px 15px 20px 25px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
/*相当于：border-radius: 50% 50% 50% 50%;*/
background: orange;
}
.demo {
width: 100px;
height: 100px;
background: aqua;
/* border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px; */
/* 宽高：可以不取同一值:不同值效果为椭圆弧线 */
border-top-left-radius: 20px 60px;
border-top-right-radius: 40px 40px;
border-bottom-right-radius: 60px 20px;
border-bottom-left-radius: 80px 10px;
/*相当于： border-radius: 20px 40px 60px 80px/60px 40px 20px 10px; */
}
</style>
</head>
<body>
<div class="btn">
登录
</div>
<div class="circle"></div>
<div class="demo"></div>
</body>
</html>效果图：
2、box-shadow 盒子阴影/（性能杀手）阴影不会撑开盒子大小
box-shadow: x y [模糊半径] [阴影拓展半径] [阴影颜色] [投影方式]
投影方式：默认是向外投影outset；向内投影inset
3、text-shadow 文字阴影 /（性能杀手）
text-shadow: x y [模糊半径] [阴影颜色]
4、rgba(r, g, b, a)
注意与opacity的区别
opacity子元素会继承父元素设置的透明度值，而rgba不会
二、渐变
1、线性渐变
background:linear-gradient(direction, color [percent], color [percent]) 属性值参数详解如下：
direction //渐变方向
写方向：to bottom/to bottom right……
写角度：0deg/45deg
color //渐变颜色
percent // 百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变</title>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
/*线性渐变*/
background: linear-gradient(to right, yellow, red);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
direction值改成to bottom right：
direction值改为任意角度值（例如：48deg/0deg/）:
将值设置为：（可以设置多颜色的渐变）
background: linear-gradient(0deg, yellow, red, pink);效果图：
将值设置为：（可以设置从什么位置开始渐变）
background: linear-gradient(90deg, yellow 20%, red, pink);效果图：
2、径向渐变
background:radial-gradient(shape r/(a,b) at position, color [percent], color [percent]) 属性值参数详解如下：
shape //形状
circle/ellipse：圆或椭圆
r/(a,b) // 半径/(长短轴)
position //中心点位置
像素值/百分比/方向(top left)/也可以是一个值，第二个值默认center
*transparent透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变</title>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
/*径向渐变*/
/* background: radial-gradient(圆/椭圆、半径、中心点位置); */
background: radial-gradient(circle 100px at 200px 200px, red, pink);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
将值设置为：
background: radial-gradient(circle 100px at 200px 200px, red, pink, transparent);效果图：
将值设置为：
background: radial-gradient(circle 100px at 200px 200px, transparent 50%, pink, transparent);效果图：
将值设置为：
background: radial-gradient(ellipse 50px 100px at top left, transparent 50%, pink, transparent);效果图：
三、CSS3 新增 background值：
1、指定绘制背景图像时的起点
background-origin:border-box | padding-box | content-box
指定背景的显示范围
background-clip: border-box | padding-box | content-box
2、指定背景中图像的尺寸
background-size:auto|length|percentage|cover|contain 属性值详解如下：
cover// 用一张图片铺满盒子：若为横图：高度铺满；若为竖图：宽度铺满；
contain //让盒子保留一张完整背景图片
background-position
四、CSS3 新增 border值：
可单独设置每边的border
border: border-width border-style b order-color;
给border添加背景图片
border-image：url number style;属性值详解如下：
url //图片地址
number // 图片裁剪的值
style // 图片添加的方式
例如：花边效果
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
