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揭秘》》的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Python 一键安装全部依赖包

    使用 pip requirements.txt 用来记录项目所有的依赖包和版本号,只需要一个简单的 pip 命令就能完成. pip freeze > requirements.txt 生成的文件 ...

  2. ng-http

    启用 Http 服务 open the root AppModule, import the HttpClientModule symbol from @angular/common/http, ad ...

  3. WSL的ssh-agent问题

    WSL , 使用forwardAgent 的时候 , 用的以下两个应用 ubuntu 18.04 . ubuntu 这两个应用的 ssh-agent是有问题的 . 详见 https://github. ...

  4. Python第三方库requests的编码问题

    PS:这个解决方法可能很简单,但是这是平时的一些细节问题,所以有必要提醒一下! 首先代码不多,就是通过get方法去获取豆瓣首页信息,如图:但是会报UnicodeEncodeError: 'gbk' c ...

  5. P2048 [NOI2010]超级钢琴 [堆+st表]

    考虑只能取长度为 [L,R] 的,然后不难想到用堆搞. 搞个前缀和的st表,里面维护的是一个 最大值的位置 struct rmq { int mx[N][20] ; void qwq(int n) { ...

  6. 《80x86汇编语言程序设计教程》第二章课后题答案

    2.5 习题 2.1 数据寄存器 1. 八个通用寄存器除了各自规定的专门用途外,它们均可以用于传送和暂存数据,可以保存算术逻辑运算中的各种操作数和运算结果. 2.1 AX和Al寄存器又称为累加器(ac ...

  7. springboot的yml配置文件里有多个参数的调用方式

    本篇教程适用于配置文件一级下有多个二级或三级时,如何在service层不用通过多个@Value就能获取配置文件的参数 例如yml配置是这样的: 如果service层要引用这些参数,用多个@Value( ...

  8. HTML5,从零开始

    一.网页的组成部分 <!DOCTYPE html> <html> <head> <title>这是标题</title> <meta c ...

  9. linux-mysql-主从同步

    什么是二进制日志binlog:记录着mysql数据库中的一些写入性操作,比如一些增删改,但不包括查询!二进制日志有哪些功能:数据复制和数据恢复的功能 查看网络状态:netstat -natp查看mas ...

  10. STL标准库面试题(转)

    一.vector的底层(存储)机制 二.vector的自增长机制 三.list的底层(存储)机制 四.什么情况下用vector,什么情况下用list 五.list自带排序函数的排序原理 六.deque ...