[补充知识 1.0]盒子阴影文字阴影pleaseholder改颜色 C3盒子模型背景照片-渐变-精灵图居中鼠标经过改边框色 margin负值

技术2022-07-11 125

加粗样式## 1.box-shadow 1.阴影不占位置的第一个值是水平偏移量正值向右,负值向左第二个值垂直偏移量正值向下.负值向上第三个值是模糊范围第四个值是阴影的大小第五个是阴影的颜色

如果我想多个方向有阴影那么可以通过逗号隔开

2. text-shadow

h1 { text-shadow: 5px 5px 5px #FF0000; }

3. input 更改 pleaseholder 的字体样式

input::-webkit-input-placeholder { color: red; font-size: 14px; }

4.box-sizing:border-box

如果盒子只有40高你给ｐａｄｄｉｎｇ:30px 0; 那么高为60px

5.background-size 背景照片可以同时写几个背景照片,也可以和背景渐变一起写

background-size:500px 400px;改变背景的宽高 background-size:100% 100%;和父级大小一样 50%的话是背景图片所在盒子宽高的50% background-size:100px;宽度100px,高度auto自动等比例缩放 background-size:cover ;等比例缩放,完全覆盖背景,超出的一部分会看不到. bcakground-size:contain;扩展到最大,直到宽或者高其中一个先到父级大小,就停止放大,有可能铺不满盒子

背景照片可以同时写几个背景照片,也可以和背景渐变一起写背景图片要写再上面,背景颜色写后面!!!

5.1关于那个login案例背景颜色高度不够的时候会出现背景颜色平铺:

如果不给html,body{ min-height:100%; }

5.2背景精灵图居中background- origin: content-box

这里我们用js写循环精灵图的时候背景图片不会居中

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 150px; margin: 50px auto; border-top: 1px solid #ccc; border-left: 1px solid #ccc; } li { float: left; list-style: none; width: 50px; height: 50px; padding: 13px 12px 12px 13px; background-image: url(./images/sprite.png); background-repeat: no-repeat; /* 背景盒子居中 */ background-origin: content-box; box-shadow: 1px 1px 0 0 #ccc; box-sizing: border-box; } </style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var box = document.querySelector('.box'); var lis = document.querySelectorAll('li') for (var i = 0; i < lis.length; i++) { var index = i * 44; lis[i].style.backgroundPosition = `0 -${index}px` } </script> </body> </html>

6. 鼠标经过改变边框颜色 margin负值

这个时候不需要重新设置border,只需要改变边框颜色就可以了有的需要用到 margin负值:如果配合hover需要用到定位给z-index增加层级,不然有margin负值的一边显示不出来

6.1 鼠标经过控制同级兄弟

hover:想做兄弟间的控制的话可以用+号

7. 锤子面试题

一个div用三种方法写出三个颜色

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* 第一种 */ /* .box { width: 200px; height: 200px; background-color: #ccc; margin: 200px auto; box-shadow: 100px 0px 0px 0px red, -100px 0px 0px 0px green; } */ /* 第二种 */ /* .box { width: 400px; height: 200px; background-color: #ccc; margin: 200px auto; border-left: 200px solid green; border-right: 200px solid red; } */ /* 第三种 */ .box { position: relative; width: 400px; height: 200px; background-color: #ccc; margin: 200px auto; } .box::after { position: absolute; content: ""; width: 100px; height: 200px; background-color: red; } .box::before { position: absolute; top: 0; right: 0; content: ""; width: 100px; height: 200px; background-color: green; } </style> </head> <body> <div class="box"></div> </body> </html>

Processed: 0.010, SQL: 9

[补充知识 1.0]盒子阴影文字阴影pleaseholder改颜色 C3盒子模型 背景照片-渐变-精灵图居中鼠标经过改边框色 margin负值