《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 安装并启动 ...
随机推荐
- Python 【图片转字符画】
一.安装的第三方模块 $ sudo pip3 install --upgrade pip $ sudo pip3 install pillow //window pip3 install pillow ...
- D - Counting Squares
Your input is a series of rectangles, one per line. Each rectangle is specified as two points(X,Y) t ...
- 拦截器——原理（AOP、责任链模式、配置）
1.Struts2拦截器概述: (1)Struts2框架封装中封装了很多功能,这些功能其实都是封装在Struts2的拦截器里面,Struts2里面有很多拦截器,每次不是这些拦截器都执行,每次只执行默认 ...
- 前向传播和反向传播实战（Tensor）
前面在mnist中使用了三个非线性层来增加模型复杂度,并通过最小化损失函数来更新参数,下面实用最底层的方式即张量进行前向传播(暂不采用层的概念). 主要注意点如下: · 进行梯度运算时,tensorf ...
- openlayers轨迹播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 代数式转换为c语言表达式(很简单)
- LeetCode 3sum-closest 题解
思路 排序 枚举一个数a 双指针移动法确定b和c 求和,更新最接近的值 复杂度 T(n)=O(n2)  M(n)=O(1)T(n)=O(n^2) \; M(n)=O(1)T ...
- 在ASP.NET 中调用 WebService 服务
一.webservice定义 详见 https://www.cnblogs.com/phoebes/p/8029464.html 二.在ASP.NET MVC 中调用 webservice 1:要调用 ...
- java - GC垃圾收集器详解（二）
CMS收集器 CMS收集器(ConcurrentMarkSweep:并发标记清除)是一种以获取最短回收停顿时间为目标的收集器. 适合应用在互联网站或者B/S系统的服务器上,这类应用尤其重视服务器的响应 ...
- 2019-08-21 纪中NOIP模拟A组
T1 [JZOJ6315] 数字 题目描述