css揭秘读书笔记(一)
来源:互联网 发布:植村秀淘宝旗舰店 编辑:程序博客网 时间:2024/06/05 18:37
css揭秘读书笔记(一)
- 带箭头的提示框
- 透明边框
- 多重边框
- 背景图片灵活定位
- 缝边效果
- 边框内圆角
- 带箭头的提示框
- tips: 利用伪元素和继承
html
<div class="box">你好,css</div>
css
.box { width: 200px; padding: 20px; margin-top: 20px; position: relative; border: 1px solid #e4e4e4; background: #f5f5f5;}.box:after { content: ''; position: absolute; width: 12px; height: 12px; top: -7px; left: 20px; border: inherit; background: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg);}
- 透明边框
- tips: 如果不用background-clip则边框会被覆盖,因为background-clip默认值为border-box,即将背景裁剪到边框,将值设为padding-box即可将背景裁剪到内边距框
html
<div class="box">你好,css</div>
css
body { background: #F5E434;}.box { width: 200px; padding: 20px; margin-top: 20px; background: #fff; border: 10px solid hsla(0, 0%, 100%, .5);/*透明边框*/ background-clip: padding-box;}
- 多重边框
- tips: 利用box-shadow,将偏移值和模糊距离都设为0,阴影的尺寸即为边框的宽度,因为box-shadow可以添加多个阴影,因此可以实现多重边框
html
<div class="box">你好,css</div>
css
.box { width: 200px; padding: 20px; margin: 40px; background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink;}
- 背景图片灵活定位
- tips: 利用background-origin改变背景图片的定位位置,默认根据内边框定位
html
<div class="box">你好,css你好,css你好,css你好,css你好,css</div>
css
.box { width: 200px; padding: 20px; background: url(images/square.png) no-repeat; border: 1px solid #e4e4e4; background-origin: content-box; /*还可以改成background-position: left 20px top 20px;*/}
- 缝边效果
- tips: 利用outline-offset将描边移至元素内,但是outline不能实现圆角
html
<div class="box">你好,css</div>
css
.box { width: 200px; padding: 20px; background: yellowgreen; border-radius: 5px; outline: 1px dashed #fff; outline-offset: -10px;}
- 边框内圆角
- tips: 利用box-shadow和outline,box-shadow可以实现圆角,outline在box-shadow的上层
html
<div class="box">你好,css</div>
css
.box { width: 200px; padding: 20px; margin: 40px; background: tan; border-radius: 10px; box-shadow: 0 0 0 4px deeppink; outline: 10px solid #655;}
将box-shadow的颜色值设为#655并设置阴影尺寸合理值即可以“填满空隙”,关于阴影尺寸的设置:必须大于
阅读全文
0 0
- css揭秘读书笔记(一)
- 《css揭秘》读书笔记
- CSS揭秘读书笔记-第一章 引言
- 《css揭秘》学习笔记(一)
- CSS揭秘(引言)
- spring揭秘 读书笔记 一 IoC初探
- 《css权威指南》--读书笔记(一)
- CSS揭秘读书笔记-第二章 背景与边框
- 《代码揭秘--从C/C++的角度探秘计算机系统》读书笔记(一)
- 精通CSS:高级web标准解决方案之读书笔记(一)
- Head First HTML与CSS 读书笔记(一)
- .NET Task揭秘(一)
- 《css揭秘》学习笔记(二)
- CSS揭秘(背景与边框)
- 读书笔记--精通CSS高级Web标准解决方案(一)---CSS基础
- 《SIP揭秘》读书笔记
- 《sip揭秘》读书笔记1
- 《sip揭秘》读书笔记2
- 在ubuntu下编译多个C++文件
- 学习互联网架构第八课(单例和多线程)
- 多个Fragment界面重叠和拍照闪退问题
- NPOI的文件流
- spring中的Cglib字节码增强实现AOP
- css揭秘读书笔记(一)
- 自定义分页
- 【PB】PB画板介绍
- Model传值的学习
- 制作logo
- TCP/IP
- 内存模块:BSS段、数据段、代码段、堆与栈
- 关于ToolBar+DrawerLayout的小结
- win10+ubuntu17.04双系统安装