《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 安装并启动 ...
随机推荐
- MySQL优化(四)——读写分离
1.MySQL高可用 主从复制 一主多备 多主多备 读写分离 减少IO开销,防止阻塞等等 2.主从复制参考 https://www.cnblo ...
- Hbase架构剖析
HBase隶属于hadoop生态系统,它参考了谷歌的BigTable建模,实现的编程语言为 Java, 建立在hdfs之上,提供高可靠性.高性能.列存储.可伸缩.实时读写的数据库系统.它仅能通过主键( ...
- win10家庭版更改本地账户名、C盘Users下文件夹名和环境变量等
PS:由于四五年前装系统的时候懵懵懂懂的敲了一个中文用户名(有一个字还打错了,尴尬),导致现在打开cmd默认是C:\Users\中文名,path环境变量中也有中文路径,有时候有些程序的路径也是中文,这 ...
- centos6/7 下升级openssl并安装python3
今天是2019年的最后一天了,看了看自己今年写的随笔就一篇,实在有点少得可怜,就想着趁现在有点时间就再写一篇,^_^ centos6 或者centos 7 python 默认都是安装python 2 ...
- centos系统mongodb安装
使用腾讯云搭服务器时,需要链接数据库,就从头开始重新安装了一遍mongodb,没想到这么麻烦,记得之前没这么麻烦. 1.下载mongodb(一篇博客的) 安装的是3.6版本 `` vim /etc/y ...
- OI学习之路上的宝藏网站/App分享
OI学习之路上的宝藏网站/App分享 想要变强吗少年?这里有各种我平时收集的网站/App,它们可以帮助你更好地学习算法或者找到解题思路.废话不多说,快来打开新世界的大门罢~ 知识学习 觉得各种知识晦涩 ...
- 关闭Apache的目录浏览功能
一.默认情况 默认情况下,Apache的配置文件C:\web\apache2.4\conf/httpd.conf中有如下参数: 引用 <Directory "/var/www/html ...
- 微信小程序调试页面的坑
使用微信开发者工具切新的页面保存刷新无法在左侧直接预览必须在app.json文件配置页面(填写路径但是不用写后缀名),并且把想要预览的页面放在第一个位置.
- easyui-numberbox后台获取数据后，鼠标一点击就自动清空了
<input type="text" name="txtMeterInitData" id="txtMeterInitData" cl ...
- LeetCode136. 只出现一次的数字（异或）
给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: 输入: [ ...