背景图片
设置背景为图片:background-image:
格式:background-image:url(“图片地址”)
图片太小了预留的框太大了,就需要用到另外一个属性了
background-size:设置背景图片的大小
属性值:px 单词
单词
注:都会让图片等比例缩放。
-
cover 将盒子铺满背景图,但是不保证图片的完整显示。
-
contain 将图片完整的显示,不保证铺满盒子。
px:可以直接将图片限制成我们想要的高度:
也可以只设置一个属性,宽或者高,图片会自适应。
background-repeat 设置背景图片是否重复以及如何重复,默认为平铺满。
属性值
-
repeat:平铺 默认值
-
no-repeat:不平铺
-
repeat-x 水平上平铺
-
repeat-y 垂直上平铺
背景图片定位
1.像素
background-position: 水平偏移量(正向右) 垂直偏移量(正向下);
2.百分比
图片在左上角是 0% 0%
图片在右下角是100% 100%
代表的像素值:(盒子的宽/高-图片本身的宽/高)*百分比
也可以为负数。
3.单词
top
bottom
center
left
right
如果只有一个值,默认另外一个值为50%
css3背景
background-origin 背景原点
padding-box 从内边距开始显示背景 默认
border-box 从边框开始显示背景
content-box 从内容开始显示背景
background-clip 背景裁切
border-box 默认值 超过边框部分的背景,将被裁剪
padding-box 超过padding部分的背景,将被裁剪掉。
content-box 超过内容部分的背景,将被裁剪掉。
文本
text-shadow 文本阴影。
格式:
text-shadow: 水平偏移量 垂直偏移量 模糊度 阴影颜色;
盒子属性
盒子:
边框圆角
border-radius
属性值:px 百分比
border-radis:水平半径 垂直半径
border-radis:10px;
以10px为半径,画圆,以得到的弧度为边角。
可以按照四个角来设置:
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-radius: 左上 右上 右下 左下;
省略的角度,取对角的值。
半径写法:
border-radius: 150px/200px; 水平半径/垂直半径
盒子阴影
box-shadow
格式: box-shadow:水平偏移 垂直偏移 模糊度 阴影大小 阴影颜色 内阴影/外阴影
默认为外阴影
线性渐变
格式:
background-img:liner-gradient(方向,起始颜色…终止颜色);
方向:to left,to right,to top,to bottom
角度 deg
👆百分比和角度写法
径向渐变
background-img:radial-gradient(辐射的半径大小 中心的位置,起始颜色,…终止颜色);
中心的位置:
单词
at center
at left
at top
at right
at bottom
px
按照左上角进行位移
👆渐变写法