《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 安装并启动 ...
随机推荐
- 论文阅读笔记（十八）【ITIP2019】：Dynamic Graph Co-Matching for Unsupervised Video-Based Person Re-Identification
论文阅读笔记(十七)ICCV2017的扩刊(会议论文[传送门]) 改进部分: (1)惩罚函数:原本由两部分组成的惩罚函数,改为只包含 Sequence Cost 函数: (2)对重新权重改进: ① P ...
- Elasticsearch启动、停止脚本
注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/es-shell ...
- dp --A - Super Jumping! Jumping! Jumping!
A - Super Jumping! Jumping! Jumping! Nowadays, a kind of chess game called “Super Jumping! Jumping! ...
- pyjsonrpc的使用
pyjsonrpc的使用 客户端 JsonRpcClient.py #!usr/bin/env python2.7 # -*- coding: utf-8 -*- import ssl import ...
- java文本文件加密
加密方法是通过输入流对源文件字符逐个读取,对其读取到字符的ascll值进行异或运算,并将其放入新文件中,解密时只要用相同的密钥进行ascll异或运算并向新文件输出即可,即对文件首次用该程序处理为加密, ...
- 在eclipse更新启动项目
说明:figfree是基于模块化开发,代码重用,可拆解性高. 功能模块分为:接口工程(*.Iface).接口实现工程(*.Impl).客户端工程(*.Client) 接口工程(*.Iface):对其他 ...
- [PAT] A1021 Deepest Root
[题目大意] 给出n个结点和n-1条边,问它们能否形成一棵n个结点的树,如果能,从中选出结点作为树根,使整棵树的高度最大.输出所有满足要求的可以作为树根的结点. [思路] 方法一:模拟. 1 连通.边 ...
- Linux connect: Network is unreachable
在虚拟机中ping,发现网络不通: [root@node01 ~]# ping 114.114.114.114 connect: Network is unreachable 发生此问题时,环境如下: ...
- yii2 生成随机字符串
uuid uuid use Faker\Provider\Uuid; Uuid::uuid(); yii自带 生成32位字符串 Yii::$app->getSecurity()->gene ...
- (填坑系列) 用aio写server与client进行通信的坑
最近闲来无事,就估摸着自己写个“服务注册中心”来玩,当然因为是个人写的,所以一般都是简洁版本. 代码地址在:https://gitee.com/zhxs_code/my-service-registe ...