CSS3边框温故

1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框、颜色、粗细

2.基本属性,包括三个类型值:
(1)border-width:设置元素边框的粗细,默认3~4px
(2)border-color:设置元素边框的颜色,默认色就是字体颜色
(3)border-style:设置元素边框的类型,默认【none】
缩写语法:border:border-width border-style border-color;
注:缩写后每个属性之间使用空格隔开,它们之间没有先后顺序

3.在Web实际制作之中,CSS中border可以给不同的边设置不同的风格,其遵守【TRBL】原则(Top/Right/Bottom/Left),单独写法:
border-top-style(设置元素顶部边框类型)
border-right-style(设置元素右边边框类型)
border-bottom-style(设置元素下边边框类型)
border-left-style(设置元素左边边框类型)
同理:border-color和border-width都可以单独设定
注:这种单独设定方式,分为四种情况:(1)一个值的时候,表示四条边设定相同(2)两个值的时候,第一个值表示上下边,第二个值表示左右边(3)三个值的时候,第一个值表示上边,第二个值表示左右,第三个值表示下边(4)四个值得时候,遵循上、右、下、左,顺时针方向设定
超级组合大法:li{border:solid 1px red;border-width:1px 0;},仅两行代码就表达出元素li顶部和底部都以一条1px的红色实线。这样方便维护代码,并且提升CSS性能
超级组合大法引起的思考:突然觉得灵光一闪,自己天天使用border可以说达到了游刃有余的地步,但是自己却从来没有分类的去思考过它,真是万分惭愧,写下来与大家共勉
(1)元素设置一条描边:这种情况使用border-T/R/B/L方法设置为优
(2)元素设置两条描边(位置为对立或相连):这种情况使用组合大法为优
(3)元素设置三条描边:这种情况使用组合大法为优
(4)元素设置四条描边:这种情况使用组合大法为优
当然还有这些是在描边都一样的前提下,不一样的时候就分别给不同的属性使用T/R/B/L就可以了
总结:以后对于问题的思考应该分层次,分类,从不同的角度审视

4.边框的类型:border-style值列表

CSS3边框温故

上面11个值在各浏览器下呈现的效果均有差异,其中最不可预测的边框样式是double,两条线的宽度和线之间的宽度无法确定。而dotted、dashed、outset和inset在不同的浏览器下也无法保证一致

CSS3边框还有哪些:border-image、border-radius、box-shadow

5.border-radius设置
遵循TRBL规则(Top/Right/Bottom/Left),可以设置1、2、3、4种值,是圆的四分之一
eg:border-radius:60px 40px 30px 20px;
单独设置水平和垂直半径值:(是椭圆的四分之一)
border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;

6.特殊应用
(1)border-radius还有一个内半径和外半径的区别,元素边框值较大时,效果就很明显。当border-radius半径值小于或等于border的厚度时,元素边框内部就不具有圆角效果

CSS3边框温故
CSS3边框温故

元素的内半径 = 外半径 -边框宽度

(2)第二种是,元素相邻边有不同的宽度,这个角将会从宽的边平滑过渡到窄的一边,其中一条边甚至可以是0,元素相邻转角是由大向小转

CSS3边框温故
CSS3边框温故

还有,图片应用圆角,表格应用圆角,其实可以不用border-width,直接多增加一层就可以避免border-width和border-radius两者之间的矛盾

(3)兼容性

CSS3边框温故

制作圆(设置4个属性)、半圆(设置两个属性)、扇形(设置一个属性)、椭圆(x/y)

7.box-shadow
可以当border使用,没有内外半径之分,并且不计算在结构中;
多层阴影用逗号【,】分开

CSS3边框温故

兼容IE8以下版本,可以使用IE的滤镜进行模拟:

filter:progid:DXImageTransform.Microsoft.Shadow(color="颜色值",Direction=阴影半径(数值),Strength=阴影半径(数值))

更多相关文章
  • CSS3边框阴影
    CSS3边框阴影实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3边框阴影</title> <style>  d ...
  • 利用css3选择器及css3边框做出的特效(1)
    利用border-radius及box-shadow制作圆角表格 界面效果图如下: css样式如下所示: * { margin: 0; padding: 0; } body { padding: 40px 100px; } .demo { width: 600px; margin: 40px aut ...
  • CSS3文本温故
    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:text-shadow:none | <length> none | [<shadow ...
  • CSS3基本知识
    1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的布局.字体.颜色.背景和其他效果实现更加精确的控制,只要对相应的代码做一些简单的修改,就可以改变同一 ...
  • CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是在 CSS 3D 转换.动画等特性的支持,可以轻松的创建很酷的 Web 效果. 在这篇文章中我们介绍 11 个使用 CSS3 和 jQuery 实现的特效,很酷.使用 jQuery 和 CSS 实现的放大镜效果简单而惊人的CSS3边框过渡效果 ...
  • CSS魔法堂:重拾Border之——图片作边框
    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时, ...
  • chrome 利用chorme调试手机网页 Chrome控制台 JS调试的一些小技巧 chrome使用技巧(看了定不让你失望) 我所了解的chrome 你可能不知道console强大 CSS3精典 css3新增属性API CSS收集的常用代码(与打印相关) CSS3动画(性能篇) css编写规范 C ...
  • Bootstrap_列表组
     一.基本列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件. <ul class="list-group"> <li class="list-group-item&quo ...
一周排行
  • 使用jquery控制div的显示与隐藏方法:    $("#id").show()表示display:block    $("#id").hide()表示display:non ...
  • 对于程序开发人员而言,目前使用最流行的两种后台数据库即为MySQL and SQL Server.这两者最基本的相似之处在于数据存储和属于查询系统.你可以使用SQL来访问这两种数据库的数据,因为它们都支持ANSI-S ...
  • 五一假期总结
    今年的五一过得比较充实,去了广州百万葵园.肇庆七星岩及鼎湖山三个地方,虽然累但很开心.出来 ...
  • VMware---MSCSvm的存储迁移
    VMware---MSCS vm的存储迁移环境:ESXi5.5U2         FC ...
  • 原文来自 Ext Gantt Web甘特图控件 -方案网,欢迎转载.关键字:甘特图(Gantt chart )又叫横道图.条状图(Bar chart).它是以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的 ...
  •    在芯片界,两位巨头AMD和英特尔的碰撞一直引人注目.虽然英特尔在市场占有率方面暂时拥有一定优势,但是AMD因为其产品的性价比,性能稳定等优势也拥有了越来越多的固定拥趸.尤其在中国大陆内地,AMD在DIY市场的市 ...
  •  package com.demo; public class ArrayDemo { public static void main(String[] args) { int[] number={-10,2,3,2 ...
  • 1. 你好,我是万网客服中心的, 你是咱公司的网络负责人吗?通知你一下, 我们在xx日10点到第二天凌晨5点进行系统维护, 届时你的邮箱业务会受到影响, 所有邮件的收取都将延迟一个小时,但邮件不会丢, 你是张xx先生 ...
  • 开垦心灵之田.
  • IterCast教程全套教程:涵Linux,Cisco,数据库等下载地址:http://pan.baidu.com/s/1pJ2m7Mj