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是控制对象的边框边线宽度.颜色. ...
随机推荐
- Linux内核分析第四周总结
用户态,内核态和中断处理过程 库函数将系统调用封装起来 用户态和内核态的差别: 在内核态时,cs和eip的值可以是任意地址,但在用户态时只能访问0x00000000 - 0xbfffffff,0x00 ...
- 炸弹人的Alpha版使用说明
本游戏是一款手机游戏,学生可以在无聊时打发时间,放松心情.现在只有三关,但游戏运行还算可以. 注意事项: 目前游戏还有一些不好的地方,游戏无法暂停,如果游戏任务死亡,则无法重开. 游戏后面的关卡还需要 ...
- 【壹拾壹周】final_review
项目名:俄罗斯方块 组名:新蜂 组长:武志远 组员:宫成荣 杨柳 谢孝淼 李桥 final Review会议 时间:2016.12.3 会议内容 设想和目标 1.在final阶段发布时的预期目标是什么 ...
- C++学习记录（留坑）
#include <iostream> #include <ctime> #include <fstream> ///文件打开有o.i权限 #include < ...
- PHP后台支付的开发:微信支付和支付宝支付
关于支付的流程之类的就不做解释,大家可以自行搜索! 微信支付 项目前提:本人用的是tp框架,PHP语言下载到微信平台提供的微信支付接口文件,放在了tp第三方类库vendor,命名为WxpayAPI, ...
- [51CTO]服务器虚拟化开源技术主流架构之争
服务器虚拟化开源技术主流架构之争 http://virtual.51cto.com/art/201812/589084.htm 大部分客户已经是KVM+OpenStack的架构了 我所见到的 工商云 ...
- c++中冒号（：）和双冒号（::）的用法
1.冒号(:)的用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; ...
- BZOJ 3170 松鼠聚会(切比雪夫距离转曼哈顿距离)
题意 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短距离. 思路 题目 ...
- google-gson 使用及GsonBuilder设置
Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率. 从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一种类型是标量(scalar),也就是一个单独的字符串( ...
- [代码]--db2中left()函数和right()函数对应oracle中的substr()函数
DB2 LEFT.RIGHT函数 语法:LEFT(ARG,LENGTH).RIGHT(ARG,LENGTH) LEFT.RIGHT函数返回ARG最左边.右边的LENGTH个字符串,ARG可以是CHA ...