《CSS世界》读书笔记(十四)
<!-- 《CSS世界》张鑫旭著 -->
功勋卓越的 border 属性
border-width 不支持百分比值
border-style 类型
border-style 默认值是none;多出现在重置边框样式的时候,渲染性能最高的写法是:
div {
border: 1px solid;
border-bottom: 0 none;
}
border-style: dashed
虚线边框。虚线颜色区的宽高比以及颜色区和透明区的宽度比例在不同浏览器下是有差异的。例如,在 Chrome 和 Firefox 浏览器下,颜色区的宽高比是3:1,颜色区和透明区的宽度比例是1:1;而 IE 浏览器则是另外的数据,颜色区的宽高比是2:1,颜色区和透明区的宽度比例也是2:1
border-style: dotted
border-style: double
双线边框,顾名思义,即两根线且为实线。表现规则:双线宽度永远相等,中间间隔±1。
border-color 和 color
border-color 默认颜色是 color 色值。具体来讲,就是当没有指定 border-color 颜色值的时候,会使用当前元素的 color 计算值作为边框色。
具有类似特性的 CSS 属性还有 outline、box-shadow 和 text-shadow等。
border 与透明边框技巧
虽然 color: transparent 在 IE9 以上版本的浏览器才支持,但是 border-color: transparent 在IE7浏览器就开始支持了。
1.右下方 background 定位的技巧
在 CSS3 新世界还没到来的时候,background 定位有一个比较大的局限性,就是只能相对于左上角数值定位,不能相对右下角。这种特性有时候会给我们的工作带来一点儿麻烦。
假设现在有一个宽度不定的元素,我们需要在局里右边缘50像素的位置设置一个背景图片,此时 background 属性就遭遇尴尬了:由于宽度不固定,所以无法通过设定具体数值来实现我们想要的效果,因为 background 是相对左上角定位的,我们的需求是右侧定位。
要实现上面的需求,方法很多。其中一种方法就是使用透明边框,如下 CSS 代码:
.box {
border-right: 50px solid transparent;
background-position: 100% 50%;
}
此时,对 50px 的间距我们使用 transparent 边框表示。并且,默认 background 背景图片是相对于 padding box 定位的,也就是说,background-posiiton: 100% 的位置计算默认是不会把 border-width 计算在内的。
2.三角等图形绘制
即使在移动端,使用 CSS 的 border 属性绘制三角形等图形仍是性价比最高的方式。例如,一个朝下的等腰直角三角形,直接用:
div {
width:;
border: 10px solid;
border-color: #f30 transparent transaprent;
}
《CSS世界》读书笔记(十四)的更多相关文章
- How tomcat works 读书笔记十四 服务器组件和服务组件
之前的项目还是有些问题的,例如 1 只能有一个连接器,只能处理http请求,无法添加另外一个连接器用来处理https. 2 对容器的关闭只能是粗暴的关闭Bootstrap. 服务器组件 org.apa ...
- Java 读书笔记 (十四) Java 方法
finalize() 方法 finalize() 用来清除回收对象. //为什么要回收内存?怎样写可以避免内存过多占用?什么时候需要手动回收内存? protected void finalize() ...
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 《Linux内核设计与实现》第八周读书笔记——第四章 进程调度
<Linux内核设计与实现>第八周读书笔记——第四章 进程调度 第4章 进程调度35 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行态进程之间分配 ...
- 《Linux内核设计与实现》 第八周读书笔记 第四章 进程调度
20135307 张嘉琪 第八周读书笔记 第四章 进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行态进程之间分配有限的处理器时间资源的内核子系统.只有 ...
- 《Linux内核分析》读书笔记(四章)
<Linux内核分析>读书笔记(四章) 标签(空格分隔): 20135328陈都 第四章 进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行 ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例
python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...
- 《C++游戏开发》笔记十四 平滑过渡的战争迷雾(二) 实现:真正的迷雾来了
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9712321 作者:七十一雾央 新浪微博:http:/ ...
- Java多线程编程实战指南(核心篇)读书笔记(四)
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/76690961冷血之心的博客) 博主准备恶补一番Java高并发编程相 ...
随机推荐
- (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event
浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核 Trident内核,也是俗称的IE内核Chrome 浏览器内核 统称为 Chromium 内核或 ...
- 使用ngnix做服务器的负载均衡
(1) 进程数与每个进程的最大连接数: nginx进程数,建议设置为等于CPU总核心数 单个进程最大连接数,那么该服务器的最大连接数=连接数*进程数 (2) Ngnix的基本配置 监听端口一般都为h ...
- Nestjs Graphql
文档 工作示例 安装依赖: npm i --save @nestjs/graphql apollo-server-express graphql-tools graphql app.module.ts ...
- 九、JSP入门(1)
JSP入门 1 JSP概述 1.1 什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态资源.它与html页面的作用是相同的,显示数据和获取数据. 1.2 JSP的 ...
- Java集合-treebag
import org.apache.commons.collections4.Bag; import org.apache.commons.collections4.bag.TreeBag; impo ...
- 在linux服务器新添加硬盘,如何识别、挂载。
在linux服务器新添加硬盘,如何识别.怎样挂载磁盘.过程是怎么样. fdisk - manipulate disk partition tablemkfs - build a Linux files ...
- [strongswan] strongswan是如何实现与xfrm之间的trap机制的
目录 strongswan与xfrm之间的trap机制 0. 1. 前言 2. 描述 2.1 none 2.2 trap 3. 实验与过程 3.1 trap实验 3.2 none实验 4 背景知识 5 ...
- RESTful levels 和 HATEOAS
RESTful REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy ...
- Android系统架构与系统源码目录
前言 技术博客终于可以恢复正常的更新速度了,原因是我编写的进阶书籍的初稿已经完成,窃以为它将会是Android应用书籍中最有深度的一本,可以说是<Android开发艺术探索>的姊妹篇.在这 ...
- Mysql笔试题(二)
(1)表名:购物信息购物人 商品名称 数量A 甲 2B 乙 4C 丙 ...