CSS深入理解学习笔记之border
1、border-width
border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。
border-width支持关键字:thin、medium(默认)、thick,其大小分别是1px、3px、5px(IE7除外)。
border-width默认值为何是medium(3px):因为border-style为double的情况下至少要3px才能看出效果。
2、border-style
border-style为dashed的一些有趣数据:
border-style为dotted的浏览器差异:
IE的圆点效果可以用来实现IE7/8下的圆角效果。
border-style为double的计算规则:两边边框永远相等,中间间隔±1。
border-style为double实现三等分图标:
3、border-color
border-color与color的关系:border-color默认与color值相同,类似的还有box-shadow、text-shadow等。
4、border与三角等图形构建
利用border的solid风格,可以巧妙的实现三角的构建:
也可以通过拼接的方法,上下两个小梯形,形成圆角的效果:
5、border与透明边框
透明边框的功用:
- 增加点击区域。
- 增加可视渲染区域。
6、border在布局中的应用
border实现等高布局(border大小不能为百分比,所以左侧是固定宽度的):
CSS深入理解学习笔记之border的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解学习笔记之float
1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- CSS深入理解学习笔记之vertical-align
1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...
- CSS深入理解学习笔记之margin
1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...
- CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
- CSS深入理解学习笔记之line-height
1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...
- CSS深入理解学习笔记之relative
1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...
- CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
- CSS深入理解学习笔记之padding
1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...
随机推荐
- CoreML的学习
在苹果官网下载模型model 链接: https://developer.apple.com/machine-learning/
- 基于中间件的RBAC权限控制
RBAC 是什么 RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联. 在 Django 中,权限就是用户对一个包含正则表达式 url ...
- 【算法笔记】B1022 D进制的A+B
1022 D进制的A+B (20 分) 输入两个非负 10 进制整数 A 和 B (≤230−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依次给出 3 个 ...
- [转] 一文看懂npm、yarn、pnpm之间的区别
[From] http://geek.csdn.net/news/detail/197339 原文:Understanding differences between npm, yarn and pn ...
- 异步的模块合并管理器-m3m4版本和jquery版本(原创)
m3m4版本 (function(w){ var loading={} var models={} function define(name,args){ loading[name]=true mod ...
- 转 Nmon 监控生成数据文件字段的介绍
##发现nomon 一个好用的功能 数据透视图 PIVOTCHART:这些参数被用来构建数据透视图.所需的参数:Sheetname,PageField,rowfield,columnfield,Dat ...
- linux下——java——new Font("Times New Roman", 0, 18)验证码图片变成字符
j'ava部署到了tomcat,发现了一个问题,我们登录的验证码出现了乱码,和字符 然而在windows服务器上,或者说我们本地的开发环境上面,则没有这种现象, 这是为什么? 查看源码,发现有一段代码 ...
- STM32F407使用MFRC522射频卡调试及程序移植成功
版权声明:转载请注明出处,谢谢 https://blog.csdn.net/Kevin_8_Lee/article/details/88865556 或 https://www.cnblogs.co ...
- 数据降维(Dimensionality reduction)
数据降维(Dimensionality reduction) 应用范围 无监督学习 图片压缩(需要的时候在还原回来) 数据压缩 数据可视化 数据压缩(Data Compression) 将高维的数据转 ...
- jQuery 文本插入和标签移动方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...