《CSS揭秘》》
1，透明边框
默认状态下，背景会延伸到边框区域的下层。这样就在半透明的黑色边框中透出了这个容器自己的纯白色背景。
谢天谢地，从w3c的背景与边框第三版开始，我们可以通过 background-clip 属性来调整上述默认行为导致的不便。
background-clip : border-box (默认) --- 背景会被元素的border box(边框的外沿框)裁切掉。
padding-box --- 用内边距的外沿来把背景裁切掉
代码：
<style>
.box{
height:100px;
width:100px; border: 10px solid rgba(0,0,0,.5);
background-clip: padding-box; /*完美*/
}
</style>
<body>
<div class="box">
</div>
</body>
2， 多重边框 box-shadow方案 :
一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的"投影"其实就像一道实线边框
且它支持逗号分隔语法，我们可以创建任意数量的投影。
outline方案：
优点： 它的边框样式十分灵活，不像上面的box-shadow方案只能模拟实线边框
缺点： 它不能接收逗号分隔的多个值;它暂时不能贴合border-radius属性产生的圆角
代码：
<style>
.box{
height:100px;
width:100px;
background-color: green;
box-shadow:inset 0 0 0 5px blue, inset 0 0 0 10px red;
/*外阴影不会相应鼠标事件，比如悬停或点击。所以设置为内阴影*/
outline: 2px dashed orange;
outline-offset: 3px; /*控制它跟元素边缘之间的间距*/
border-radius: 10px;
}
</style>
<body>
<div class="box">
</div>
</body>
3, 灵活的背景定位
很多时候，我们想针对容器的某个角对背景图片做偏移定位，如右下角。
background-position 的拓展语法方案 ：
w3c 在 CSS背景与边框第三版 中，background-position属性以及得到扩展，它允许我们指定背景图片距离任意角的偏移量。
只要我们在偏移量前面指定关键字。
<style>
.box{
height:100px;
width:100px;
background: url("img/demo.png") no-repeat bottom right #58a; /*在不支持background-position的拓展语法中，提供回退方案*/
background-position: right 20px bottom 10px;
}
</style>
<body>
<div class="box"> </div>
</body>
background-origin 方案 ：
每个元素身上都存在三个矩形框：
border box --- 边框的外沿框
padding box --- 内边距的外沿框
content box --- 内容区的外沿框
background-position 这个属性默认指定的是 padding box的左上角，这样边框才不会遮住背景图片。
不过在 w3c 背景与边框第三版 中，我们得到一个新的属性 ，把它的值改成content-box ，我们在 background-position 属性使用的边角关键字将会以
内容区的边缘作为基准（也就是说，此时背景图片距离变量的偏移量就跟内边距保持一致了）
代码 :
<style>
.box{
height:100px;
width:100px;
padding:10px;
background: url("img/demo.png") no-repeat #58a bottom right; /*或 100% 100%*/
background-origin: content-box;
}
</style>
<body>
<div class="box"> </div>
</body>
4, 边框内圆角
代码：
<style>
.box{
height:100px;
width:100px;
background-color: tan;
border-radius: 0.8em;
box-shadow: 0 0 0 0.6rem #655;
outline: 0.6em solid #655;
}
</style>
<body>
<div class="box"> </div>
</body>
得到这个视觉效果受益于两个事实：
描边并不会跟着元素的圆角走
但box-shadow是会的
这个方法有点hack的味道：
因为它依赖于 描边不跟着圆角走的事实 ，但我们无法保证这种行为是永远不变的。
5,条纹背景
水平条纹
代码：
<style>
.box{
height:100px;
width:100px;
background: linear-gradient(#fb3 50%,#58a 50%);
background-repeat: repeat;
background-size: 100% 20px;
}
</style>
<body>
<div class="box"> </div>
</body>
实现原理 ： 设置背景图大小（由于渐变是一种由代码生成的图像，我们能像对象其他任何背景图像那样对待它），使其平铺。并设置背景图为线性渐变。且根据线性渐变原理---
如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的线性渐变。
垂直条纹
代码：
<style>
.box{
height:100px;
width:100px;
background:linear-gradient(90deg ,#fb3 50%,#58a 50%); /*指定角度，使其颜色向右渐变*/
background-repeat: repeat;
background-size: 20px 100% /*颠倒*/
}
</style>
<body>
<div class="box"> </div>
</body>
5，平行四边形
代码：
<style>
.box{
position: relative;
display: inline-block;
padding: 10px;
}
.box::before{
content: '';
position: absolute;
top:0;
right:0;
bottom:0;
left:0; /*!!*/
z-index: -1;
background: #58a;
transform: skew(45deg);
}
</style>
<body>
<div class="box">
CLICK ME
</div>
</body>
心得： 我们希望伪元素保持所以宿主元素应用 position : relative 样式，并为伪元素设置 position : absolute,
然后把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
此时： 用伪元素生成的方块是重叠在内容之上的，一旦给它设置背景，就会遮住内容。为了修复这个问题，我们可以给
伪元素设置 : z-index : -1 样式，这样它的堆叠层次就会被推到宿主元素之后。
6,实现弹出框
代码：
<style>
.box{ /*用于遮挡背景*/
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background: rgba(0,0,0,0.5);
}
.in-box{ /*需要吸引用户注意的元素*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:300px;
height:100px;
background-color: #fff;
z-index: 1;
}
</style>
<body>
<div class="box">
<div class="in-box"> </div>
</div>
</body>
7，垂直水平居中
在css中对元素进行水平居中是非常简单的：如果它是行内元素，就对它的父元素应用text-align:center;如果它是一个块级元素，就对它自身应用 margin: auto;
代码：
<style>
.box{ /*用于遮挡背景*/
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%); /*巧用css变形属性*/
height:100px;
width:100px;
background: gray;
} </style>
<body>
<div class="box"> </div>
</body>
8,calc函数
calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
代码：
<style>
.box{
height:10px;
width:calc(100% - 300px);
background-color: red;
} </style>
<body>
<div class="box"> </div>
</body>
注意：我们常用的linear-gradient()（线性渐变）其实也是一个函数
9，紧贴底部的页脚
引入新的长度单位：
vw：1vw等于视口宽度的1%。
vh：1vh等于视口高度的1%。 什么是视口？
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
代码：
<style>
*{
padding: 0;
margin:0;
}
.main{
background-color: gray;
min-height: calc(100vh - 100px); /*巧用视口单位*/
}
.footer{
height:100px;
background-color: yellow;
}
</style>
<body>
<div class="main"></div>
<div class="footer"></div>
</body>
10,绘制三角形
代码：
<style>
.box{
width:0;
height:0;
border:50px solid transparent;
border-left: 50px solid red;
}
</style>
<body>
<div class="box"></div>
</body>
《CSS揭秘》》的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- Android_小账本_筛选功能的实现
昨天对小账本的相关功能做了完善,新增了筛选功能. 支持对类型.收支项.日期进行修改. 但暂时尚不完善,只能针对相关小项进行筛选,无法连续对小项的结果进行筛选.这一功能预计在本周三进行完善. 相关代码 ...
- H5_0026：使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
- Html5学习系列
Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.26 ...
- gulp常用插件之yargs使用
更多gulp常用插件使用请访问:gulp常用插件汇总 yargs这是一款通过解析参数并生成优雅的用户界面来帮助您构建交互式命令行工具.处理命令行参数的通用解决方案,只要一句代码 var args = ...
- 小总结：快速幂+贪心————Bit Mask____UVA 10718 多多去理解去温习哦！
传送门:https://vjudge.net/problem/UVA-10718 Preview: bitstream:a flow of data in binary form. in bit-wi ...
- 一个简易git服务器的搭建
查看本机ssh公钥,生成公钥 查看ssh公钥方法: 1. 打开git bash窗口 2. 进入.ssh目录: cd ~/.ssh 3. 找到id_rsa.pub文件: ls 4. 查看公钥:cat i ...
- ZOJ 4082 Little Sub and his Geometry Problem题解
题意 f(u,v):x小于等于u且y小于等于v的点才对f有贡献,每个这样的点贡献(u-x)+() 思路 =f(u_2,v_2)" class="mathcode" src ...
- springboot~集成DataSource 与 Druid监控配置
介绍 Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,Druid已经在阿里巴巴部署了超过600个应用,经过一年多生产环境大规模部 ...
- react-native构建基本页面6---打包发布
签名打包发布Release版本的apk安装包 请参考以下两篇文章: ReactNative之Android打包APK方法(趟坑过程) React Native发布APP之签名打包APK 如何发布一个a ...
- jQuery---突出展示案例
突出展示案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...