css3
关注
分享
扫一扫
明日份可乐
Hello World!
展开
-
css3文字阴影效果
文字阴影使用css3的text-shadow属性text-shadow: 0 0 0 red; 第一个参数是x轴的位置 第二个参数是y轴的位置 第三个参数是模糊程度 第四个参数是颜色p { text-shadow: 1px 1px 1px red;}<p>Hello world</p>以上代码实现以下效果：...原创 2019-08-16 18:22:47 · 196 阅读 · 0 评论 -
css3瀑布流布局
瀑布流布局原理：使用分栏布局让每一个元素在所在的栏都设置width：100%每个元素在加载的时候都会去找当前高度最小的那个一栏 依次进行排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...原创 2019-08-16 20:01:07 · 468 阅读 · 0 评论 -
css3分栏布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-08-16 19:52:19 · 1194 阅读 · 0 评论 -
css3多重背景
多重背景写在最前边的 层级是在最上边 div{ width: 100px; height: 100px; background: url("./img/pdx.jpg") 0 0 no-repeat, url(./img/logo.png) 0 0 no-repeat; /* background:...原创 2019-08-16 19:39:00 · 468 阅读 · 0 评论 -
css3使用background-size设置背景图片大小
background-size设置背景图片大小：背景图大小设置（background-size）必须写在背景图引入的下百分比相对于容器的宽和高 （充满容器 很可能图片变形） div { width: 400px; height: 400px; border: 1px solid #000; ...原创 2019-08-16 19:33:07 · 9241 阅读 · 0 评论 -
css3背景图裁剪background-clip
background-clip控制背景图显示区域 如果图片设置了repeat 图片仍然会在border-box里显示background-clip: padding-box; div { width: 500px; height: 500px; padding: 50px; border: 20px dotted #...原创 2019-08-16 19:22:05 · 460 阅读 · 0 评论 -
css3背景图原点
背景图原点指的是 背景图定位的时候 0 0（坐标轴的原点） 所默认的位置如果图片平铺，那么border-box区域都是图片可以显示的区域background-origin 改变背景图原点:background-origin: padding-box(背景图以padding左上角为原点从padding左上角开始显示) ------ 默认原点（但是如果图片没有设置no-repeat 边框里也会...原创 2019-08-16 19:14:03 · 501 阅读 · 0 评论 -
css3盒子内阴影box-shadow
盒子内阴影使用box-shadowbox-shadow: inset 1px 1px 1px 1px #ccc; 第一个值代表是内阴影 第二个值是x轴偏移 第三个值是y轴偏移 第四个值是阴影模糊值 第五个值是阴影外延值 第六个值是阴影颜色div { width: 100px; height: 100px; border-radius: 50%; background-color: #c...原创 2019-08-16 18:42:45 · 5558 阅读 · 0 评论 -
css3盒子阴影box-shadow
盒子阴影使用css3的box-shadow属性box-shadow: 0px 0px 0px 0px #ccc; 第一个值是x轴偏移 第二个值是y轴偏移 第三个值是阴影模糊值 第四个值是阴影外延值 第五个值是阴影颜色div { margin: 100px auto; width: 100px; height: 100px; box-shadow: 1px 1px 1px 1px #cc...原创 2019-08-16 18:29:23 · 149 阅读 · 0 评论 -
css3图片滤镜filter
使用filter给图片添加样式 filter: blur() 模糊程度 brightness() 亮度 contrast() 对比度 opacity() 透明度 saturate() 饱和度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...原创 2019-08-16 20:22:17 · 283 阅读 · 0 评论