否定伪类选择符 盒子阴影 渐进增强和优雅降级
程序员文章站
2022-06-10 09:59:23
...
1.否定伪类选择符
E :not(F){属性：属性值;}
选中E元素中除了F元素以外的其他元素
F可以是元素选择符，也可以是类选择符，还可以id选择符
<style>
#box :not(p){color: pink;}
#box :not(.aaa){background: blue;}
#box :not(div){font-size: 40px;}
</style>
</head>
<body>
<ul id="box">
<li>1</li>
<li class="aaa">2</li>
<div>div</div>
<div class="aaa">div</div>
<li>3</li>
<p class="aaa">ppp</p>
<li>4</li>
<p>ppp</p>
<li>5</li>
</ul>
2.盒子阴影
box-shadow 设置盒子阴影
阴影水平偏移位置 正值向右 负值向左
阴影垂直偏移位置 正值向下 负值向上
阴影模糊半径 只接受正值，值越大越模糊
阴影延展半径 正值使阴影放大，负值使阴影缩小
阴影颜色 英文单词颜色表示 十六进制颜色表示 rgb()
设置内阴影 inset 可以让阴影在元素内部显示
阴影显示的顺序是先书写的显示在上面
*/
#box{width: 300px;height: 300px;background: blue;margin: 120px auto;
box-shadow: 20px 20px 0px 0px yellow,10px 20px 0 0 green,-30px -50px 0 0 pink;
/*box-shadow: 20px 20px 0px 0px yellow inset;*/
}
</style>
</head>
<body>
<div id="box">
你不努力，谁也给不了你想要的生活！
</div>
3.渐进增强和优雅降级
渐进增强（progressive enhancement）
优雅降级（graceful degradation）
渐进增强 progressive enhancement：不是一种技术，是一种设计理念。针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行功能的改进，达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
上一篇： ajax中的同步异步问题
下一篇： JavaWeb之CSS详解