1.border-radius圆角
语法格式
border-radius:value,四个角
border-radius:value value,第一个value设置左上角和右下角,第二个value设置右上角和左下角
border-radius:value value value value,从左上角开始顺时针设置四个角
value单位:px、%、em
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css圆角</title> <style> .circle{ width: 200px; height: 300px; background-color: greenyellow; margin: auto; border-radius: 50% 50% 45% 45%; font-size: 60px; color: #ef4222; font-family: Algerian; text-align: center; line-height: 300px; } </style> </head> <body> <div class="circle"> egg </div> </body> </html>
2.box-shadow盒阴影
属性值:h-shadow(必需,水平阴影的位置,允许负值)、v-shadow(必需,垂直阴影的位置,允许负值)、
blur(模糊距离)、spread(阴影尺寸)、color(阴影颜色)、inset(将外部阴影(outset)改为内部阴影)
书写格式:div { box-shadow: -6px, 7px, 8px, 9px, greenyellow; },h-shadow负值代表左边(正值代表右边)、v-shadow负值代表上边(正值代表下边)
可以同时书写多组属性值,分别设置四条边样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css盒阴影</title> <style> .square1{ width: 100px; height: 100px; border: 4px solid greenyellow; margin: 100px auto; box-shadow: -6px 7px 8px 9px yellow; } .square2{ width: 100px; height: 100px; border: 4px solid greenyellow; margin: 100px auto; box-shadow: -6px 0px 9px 9px yellow, 0px -6px 9px 9px blue, 6px 0px 9px 9px orange, 0px 6px 9px 9px purple; } </style> </head> <body> <div class="square1"></div> <div class="square2"></div> </body> </html>
3.text-shadow文本阴影
属性值:h-shadow(必需,水平阴影位置,可负值)、v-shadow(必需,垂直阴影位置,可负值)、blur(模糊距离)、color(阴影颜色)
书写格式:div { text-shadow: -10px 20px 30px blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css文字阴影</title> <style> .text{ font-size: 80px; font-family: 楷体; color: orangered; font-weight: bolder; letter-spacing: 1em; text-align: center; text-shadow: -10px -5px 3px greenyellow; } </style> </head> <body> <div class="text">避暑山庄</div> </body> </html>
4.gradients渐变,在两个或多个颜色之间显示平稳的过渡
两种渐变类型:
linear gradients,线性渐变
书写格式:background:linear-gradient(direction,color-stop1,color-stop2,……);
direction值:默认为自上向下渐变,to bottom、to top、to right、to left、to bottom right、to left top等
也可以使用角度(数值)设置方向,0deg代表从下向上、90deg代表从左向右、180deg代表从上向下、-90deg代表从右向左
线性渐变至少设置两种颜色,默认情况下,每种颜色所占空间是均匀分布
radial gradients,径向渐变
书写格式:background:radial-gradient(center,shape,size,start-color,……,last-color);
默认情况下,渐变的起点是center(中心),渐变的形状(shape)是ellipse(椭圆形)
center,渐变的起点可以通过“ at X Y”(像素)或“ at x% y%”坐标的方式设置(左上角作为0 0点坐标),还可以通过方位设置“ at left top”(或right、center、bottom等组合)
shape,渐变的形状也可以设置为 circle(圆形)
size,参数包括:closest-side(最近边)、farthest-side(最远边)、closest-Corner(最近角)、farthest-corner(最远角,默认值)
线性渐变至少设置两种颜色,默认情况下,每种颜色所占空间是均匀分布
5.linear-gradient线性渐变
① 自上向下渐变
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS线性渐变</title> <style> .grad { height: 200px; background: -webkit-linear-gradient(red , blue); /* Safari */ background: -o-linear-gradient(red, blue); /* Opera */ background: -moz-linear-gradient(red, blue); /* Firefox */ background: linear-gradient(red , blue); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
② 从左向右渐变(不同的浏览器内核,方向设置方式不同)
<html> <head> <meta charset="utf-8"> <title>CSS线性渐变</title> <style> .grad { height: 200px; background: -webkit-linear-gradient(left, red, blue); /* Safari */ background: -o-linear-gradient(right, red, blue); /* Opera */ background: -moz-linear-gradient(right, red, blue); /* Firefox */ background: linear-gradient(to right, red, blue); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
③ 使用角度设置渐变
<html> <head> <meta charset="utf-8"> <title>CSS线性渐变</title> <style> .grad { width: 300px; height: 300px; background: -webkit-linear-gradient(120deg, red, blue); /* Safari */ background: -o-linear-gradient(120deg, red, blue); /* Opera */ background: -moz-linear-gradient(120deg, red, blue); /* Firefox */ background: linear-gradient(120deg, red, blue); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
④ 颜色结点不均匀分布渐变
<html> <head> <meta charset="utf-8"> <title>CSS线性渐变</title> <style> .grad { height: 500px; background: -webkit-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Safari */ background: -o-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%);/* Opera */ background: -moz-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Firefox */ background: linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
⑤ 重复(循环)渐变
<html> <head> <meta charset="utf-8"> <title>CSS线性渐变</title> <style> .grad { height: 500px; background: -webkit-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Safari */ background: -o-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Opera */ background: -moz-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Firefox */ background: repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
⑥ 透明度渐变(通过rgba定义颜色和透明度)
<html> <head> <meta charset="utf-8"> <title>CSS线性渐变</title> <style> .grad { height: 200px; background: -webkit-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Safari */ background: -o-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1));/* Opera */ background: -moz-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Firefox */ background: linear-gradient(to right,rgba(255,0,255,0),rgba(255,0,255,1));/* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
6.radial-gradient径向渐变
① 从中心渐变
<html> <head> <meta charset="utf-8"> <title>CSS径向渐变</title> <style> .grad { width: 500px; height: 300px; margin: 100px auto; background: -webkit-radial-gradient(at center,yellow,orangered,black); /* Safari */ background: -o-radial-gradient(at center,yellow,orangered,black); /* Opera */ background: -moz-radial-gradient(at center,yellow,orangered,black); /* Firefox */ background: radial-gradient(at center,yellow,orangered,black); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
② 从四角渐变
<html> <head> <meta charset="utf-8"> <title>CSS径向渐变</title> <style> .grad { width: 500px; height: 300px; margin: 100px auto; background: -webkit-radial-gradient(at left top,yellow,orangered,black); /* Safari */ background: -o-radial-gradient(at left top,yellow,orangered,black); /* Opera */ background: -moz-radial-gradient(at left top,yellow,orangered,black); /* Firefox */ background: radial-gradient(at left top,yellow,orangered,black); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
③ 从四边渐变
<html> <head> <meta charset="utf-8"> <title>CSS径向渐变</title> <style> .grad { width: 500px; height: 300px; margin: 100px auto; background: -webkit-radial-gradient(at left center,yellow,orangered,black); /* Safari */ background: -o-radial-gradient(at left center,yellow,orangered,black); /* Opera */ background: -moz-radial-gradient(at left center,yellow,orangered,black); /* Firefox */ background: radial-gradient(at left center,yellow,orangered,black); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
④ 渐变大小和圆形渐变(注意:size、shape与center之间通过“空格”分开,而非逗号!)
<html> <head> <meta charset="utf-8"> <title>CSS径向渐变</title> <style> .grad { width: 500px; height: 300px; margin: 100px auto; background: -webkit-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Safari */ background: -o-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Opera */ background: -moz-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Firefox */ background: radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <div class="grad"></div> </body> </html>
⑤ 重复渐变和不均匀分布渐变,类似线性渐变