CSS border系列
一、border
关于border的3个属性，分别为border-width、border-style、border-color。
其中，border-color默认为元素内容的前景色；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。
关于border-color
transparent，据说特定情况下有奇效，需要知道有这样一个可选值。
white，白色的dotted边框，有时候会有奇效。
比如：
更确切地说，应该是颜色与父元素的背景颜色一样的dotted/dashed边框。
8种border-style：
（只有记住了，才能在需要的时候合理使用。）
关于mixed border
利用CSS的层叠，我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色，取决于具体情况。
小tips：边框模拟，等高布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框模拟等高布局</title>
<style>
div.container {
margin-left: 200px;
overflow: hidden;
} div.box {
width:300px;
float: left; } div.box1 {
background-color: brown;
border-right: 300px solid green;
margin-right: -300px;
} p {
margin-bottom: 50px;
} </style>
</head>
<body>
<div class="container">
<div class="box box1">
<p>box1</p>
<p>box1</p>
<p>box1</p>
<p>box1</p>
<p>box1</p>
<p>box1</p>
<p>box1</p>
</div>
<div class="box box2">
<p>box2</p>
<p>box2</p>
<p>box2</p>
</div>
<div class="container">
</body>
</html>
其实现原理为：左列边框宽度与margin负值相结合，让右边框成为右列的背景。
二、border-radius
语法规则：
border-radius:a b c d; 顺序依次为上左、上右、下右、下左。（顺时针方向）
border-radius:a b c d/a b c d ;第一组为水平数值，第二组为垂直数值。
border-top-left-radius:a b; 单个圆角的设立。
（定义单个圆角时，一定要先上下、后左右，否则无效。）
注意：
圆角生效并不以边框的存在为前提，也就是说，即使没有边框，也能设立圆角。
小tips：border-radius:50%
三、border-image
与border-radius不同，border-image以border的存在为前提；其本质是将border-style替换成image。
语法规则：
border-image-source
支持none和url两种选择；（如果是none的话，下面就不用看了。。。）
border-image-slice
按top、right、bottom、left的顺序指定九宫格的切法；支持纯数字和百分数。
（纯数字自带px单位；百分数以图像的宽高为基准计算。）
fill，可选；默认情况下第九区是不显示的；指定了fill才会显示出来；在border-image-slice中指定。
border-image-width
按top、right、bottom、left的顺序指定border-image-width，覆盖border-width；可选。
经测试，border-image-width大于border-width时，会向内扩展（外面那条线不变，向里面扩展增加宽度），但是只是它的独角戏，除了它自己发生了变化之后，其它任何东西都不会变化；它会侵入padding区甚至内容区。
border-image-width小于border-width时，会向外收缩（外面那条线不变，里面这条线向外收缩），与padding区或者内容区留出空隙。
可以为0，即border-image不存在；但不能为负值。
（个人建议，此属性看看就好，就让它默认等于边框的宽度吧。）
border-image-outset
按top、right、bottom、left的顺序指定图像向外移动的距离；可选；支持像素距离和纯数字。
像素距离好理解，20px就是移动20px的意思；纯数字是指border-width的倍数。（注意，是border-width，不关border-image-width的事。）
请注意，这里用的是移动这个词，并不是扩展。
border-image-repeat
按top、right、bottom、left的顺序指定如何填充边框的空白；接受两个值，一个水平方向，一个垂直方向。
默认stretch（拉伸），可选repeat（重复）和round（平铺）。
这里只是一些我对这些属性使用方法上的总结，并没有对属性本身的含义与机制作出说明。
关于这5个属性的具体说明，推荐一篇文章，css3:border-image边框图像详解，写得很好，非常仔细，我这么小白都看懂了。
outline
outline-width、outline-style、outline-color；语法和表现都和border一样，但是不占任何文档空间。
outline-offset，定义outline和border（padding、content area）的距离，与margin没有关系。
四、box-shadow
语法规则：
h-shadow（必需，水平阴影的位置，可负）；
v-shadow（必需，垂直阴影的位置，可负）；
blur（可选，模糊距离）；
spread（可选，阴影的尺寸）；
color（可选，阴影的颜色）；
outset（默认）/inset（可选，将外部阴影改为内部阴影）。
box-shadow应用
CSS：
.container {
width:200px;
height:100px;
background-color: #ccc;
border:10px solid red;
border-radius: 10px;
box-shadow: 0 0 0 10px green;
}
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin:0;
} .container {
width:200px;
margin: 0 auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.3),0 8px 16px rgba(0,0,0,0.5) ;
} p {
position: absolute;
margin: -40px 0 0 50px ;
} </style>
<body>
<div class="container">
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:200px;height:300px" />
<p>I am "萌萌哒".</p>
</div>
</body>
</html>
CSS border系列的更多相关文章
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- IE CSS Bug 系列
1.[IE CSS Bug系列]IE6&IE7图片链接无效 <!doctype html> <html> <head> <meta charset=& ...
- HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS border三角、圆角图形生成技术简介
http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
随机推荐
- Alpha阶段结束分数（百分制）
- Mybatis 从入门到精通一：mybatis的入门
1.Mybatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation(阿帕奇软件基金会) 迁移到了google ...
- [转帖]Programmer’s guide to the big tech companies 💻
Programmer’s guide to the big tech companies
- FuelPHP 系列（四） ------ Validate 验证
一.可用规则: 1.required 不能为 null, false or empty string.: 2.required_with 关联某个字段,关联字段有值则该字段必须有值: 3.match_ ...
- Ryuji doesn't want to study 2018 徐州赛区网络预赛
题意: 1.区间求 a[l]×L+a[l+1]×(L−1)+⋯+a[r−1]×2+a[r](L is the length of [ l, r ] that equals to r - l + 1) ...
- 【题解】 POJ 1201 Intervals（差分约束）
懒得复制,戳我戳我 Solution: 这道题就是一个板子题 抽象成第\(a\)至第\(b\)间选择数的个数为\(c\),我们就可以用前缀和来表示,这样就可以得到不等式\(s[b]-s[a-1]> ...
- ubuntu 16.04换源 网易、搜狐、阿里云
如何更改源可以在软件更新中选择源 使用如下命令更改(修改前先备份): [html] view plain copy print?sudo cp /etc/apt/source.list /etc/ap ...
- 论如何优雅的用bitset来求四维偏序
四维偏序.. 就是给你一个四维集合.再给你一些询问,请你求出a[i].x1<=ask.x1&&a[i].x2<=ask.x2&&a[i].x3<=as ...
- 【uoj126】 NOI2013—快餐店
http://uoj.ac/problem/126 (题目链接) 题意 求基环树直径. Solution zz选手迟早退役,唉,右转题解→_→:LCF 细节 拓扑排序的时候度数为0时入队.我在想什么w ...
- Python 线程同步
#-*-coding:utf-8-*- '''如果多个线程共同对某个数据修改,则可能出现不可预料的结果,为了保证数据的正确性, 需要对多个线程进行同步. 线程同步所使用的的方法: Lock RLock ...