CSS3

xiaoxiao2021-02-28  3

1.子代选择器有兼容性问题 2.css3 IE9 以后的版本支持 IE9 支持一部分 IE678根本不支持。 3.苹果 自带 safari浏览器 安卓默认浏览器 是chrome。 4.浏览器 前缀 Safari,chrome webkit firebox mos ie ms opera o -webkit-border-radius:50% 为了兼容这四个需要全都写上。 5.兼容性查询网站 : CAN I USE 6.* 通配符 css 3 新样式 1.text-shadow: 一共四个参数 ,第一个 水平偏移量 第二个 垂直偏移量 第三个 阴影程度 第四个阴影颜色 2.颜色的三种标示值 1. 单词 例如 red 2.十六进制 例如#fff 3.rgb(255,0,0)红绿蓝 都到0-255。 4rgba(255,0,0,.3)第四个参数是透明度,取值从零到1 其中零可以省略 直接写.3 3. 文本省略 1.word-break: break-all;强制换行 2.overflow: hidden; 溢出隐藏 3.text-overflow: ellipsis; 文本溢出变省略号 4.text-overflow: clip; 文字溢出剪裁; 4.box-shadow: 10px 10px 10px 10px; 盒子阴影 5.z-index 调整层级而且只有定位的元素才有效 6..class::before,.class::after在class里插入一个元素 ::after{ content:"" } 必须有而且 这个元素实际上是行级的不能设置宽和高。 7. 五环: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*#app{ text-shadow: 10px 10px 2px red; box-shadow: 10px 10px 10px 10px; width: 200px; } #div1{ width: 200px; height: 200px; border:1px solid #000; overflow: hidden; /*text-overflow: ellipsis;*/ /*word-break: break-all;*/ /*text-overflow: clip; }*/ *{ padding: 0; margin:0; } #app{ width: 800px; height: 800px; background: gray; position: relative; } .div,.div::after{ width: 200px; height: 200px; border:10px solid #fff; border-radius: 50%; } .div::after{ content:""; position: absolute; top:-10px; left: -10px; } .div1{ border-color: red; position: absolute; } .div2{ border-color: yellow; position: absolute; left:220px; top:0; } .div3{ border-color: blue; position: absolute; left:440px; top:0; } .div4{ border-color: green; position: absolute; left:110px; top:110px; } .div5{ border-color: black; position: absolute; left:330px; top:110px; } .div1::after{ border-color: red; z-index:1; border-bottom-color: transparent; } .div2::after{ border-color: yellow; z-index:1; border-left-color: transparent; /*border-bottom-color: transparent;*/ /*border-right-color: transparent;*/ } .div3::after{ border-color: blue; z-index:3; border-left-color: transparent; } .div4::after{ border-color: green; } .div5::after{ border-color: black; z-index:2; border-top-color: transparent; } </style> </head> <body> <!-- <div id="app"> 我是赵白羽 </div> <div id="div1">hkjhkdhakhLJAHLHkGKGALKHOHkgjkaSGKGkhkHjlkjlkjalkjlkjljlkjalkjljljlkjljlihuhoih</div> --> <div id="app"> <div class="div div1"></div> <div class="div2 div"></div> <div class="div3 div"></div> <div class="div4 div"></div> <div class="div5 div"></div> </div> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-1600208.html

最新回复(0)