9.1 背景相关属性
背景图片 background-image
url引入图片地址
展示特点:由上到下,由左到右依次排列
背景图大小 background-size
background-size:宽 高;(相比这个最优)
background-size:cover; 图片展示不全
background-size:contain; 图片平铺
背景平铺 background-repeat
background-repeat:repeat-x; 水平方向平铺
background-repeat:repeat-y; 垂直方向平铺
background-repeat:no-repeat;不平铺(常用)
--------------------------------------以下为不常用---------------------------------
背景图像相对位置 background-origin
background-origin:padding-box; 从padding开始处的相对位置
设置背景图像的起始位置 background-position
background-position:center;
背景图剪切 background-clip
content-box 背景绘制在内容方框内(剪切成内容方框)
背景图复合属性
background:url color image position/size repeat origin clip;
9.2 边框相关属性
外轮廓 outline(了解)
外边框圆角 border-radius
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 300px; border: 2px solid rgb(148, 208, 59); border-radius: 20px; /* border-radius: 10%; */ } </style> </head> <body> <div class="box1"></div> </body> </html>
盒子阴影 box-shaow
四个值时 box-shaow:水平方向(正值向右) 垂直方向(正值向下) 模糊值 阴影颜色(默认黑色);
五个值时 box-shaow:水平方向 垂直方向 模糊值 外延值 阴影颜色(默认黑色);
六个值时 box-shaow:水平方向 垂直方向 模糊值 外延值 阴影颜色(默认黑色) 内延值;
resize 调整盒子的大小(了解)
9.3 渐变
径性渐变 radial-gradient
调整为圆形 background-image: radial-gradient(red, yellow, green);
圆心从左上角向四周扩散 background-image: radial-gradient(at left top, red, yellow, green);
background-image: radial-gradient(at 水平(50px) 垂直(100px), red, yellow, green);
调整为正圆 background-image: radial-gradient(100px,100px, red, yellow, green);
第一个值代表x轴的半径,第二个值代表y轴的半径 background-image: radial-gradient(red 50px, yellow 100px, green 50px);
线性渐变 linear-gradient
默认从上到下渐变 background-image: linear-gradient(red, yellow, green);文章来源:https://www.toymoban.com/news/detail-806834.html
通过to 方位词进行线性渐变 background-image: linear-gradient(to bottom left, red, yellow, green);文章来源地址https://www.toymoban.com/news/detail-806834.html
到了这里,关于CSS Day9-CSS新样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!