【CSS3】边框

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div></div>

 </body>

 </html>

 div{

     width: 100px;

     height: 100px;

     background: rgba(255,0,0,0.2);

     /*border:2px solid green;*//*类似padding * ** *** ****的设置规则*/

     border-width: 3px;/*单位px或em，可设this、medium、thick*/

     border-style:double;/*默认none无边框；dotted点状；dashed虚线；solid实线；double双线，至少3px才能看到效果；groove定义3D凹槽；ridge定义3D凸起；inset内凹；outset外凸*/

     border-color: green;

     /*border-bottom: 20px black solid;*/

     border-top: ;

     border-top-style:

     border-left: ;

     border-right: ;

     /*border-radius:1em/2em ;*//*圆角的半径：单位px、em；复合属性有类似padding *(上右下左) **(左右、上下) ***(上、左右、下) ****(同*)的规律。x向半径/y向半径*/

     border-top-left-radius: 1em;

     border-top-right-radius: 1em;

     border-bottom-left-radius: 1em;

     border-bottom-right-radius: 1em 4em;/*可设x半方向半径和y方向半径不等*/

     /*border-image:url(img/花3.jpg) 20 /1em /1em repeat;*//*复合属性多个值同时设置时width和outset值前要加/，否则无效*/

     /*border-image-source: url(img/花3.jpg);*/

     /*border-image-slice: 20;*/

     border-image-width:1em ;/*单位px、em*/

     border-image-outset:1em ;/*单位px、em*/

     border-image-repeat: round;/*默认stretch拉伸；repeat重复铺满，一张图片切成3×3的九宫格，四个角填充四个角，上下左右分别重复填充四个边；round重复铺满并对图片进行调整，上下左右填充四个边时如果出现半个则进行微调，保证不会出现半个图形*/

     /*border-image-slice: 20 fill;*//*fill的作用是使九宫格中间一格也填充区域*/

 }

 div{

     box-shadow: 2px 2px 1px 1px red,4px 4px 1px 1px blue;/*默认none无阴影；阴影水平偏移值正右负左，阴影垂直偏移值正下负上，阴影模糊度，阴影外延值，阴影颜色，内外阴影（inset，默认outset，在偏移量为0时outset省和不省效果有区别）*/

 }

 div:hover{

     box-shadow:

         0px 0px 1px 5px red,

         0px 0px 1px 10px green,

          0px 0px 1px 15px blue,

 }

【CSS3】边框的更多相关文章

HTML 学习笔记 CSS3 (边框)
CSS3边框通过CSS3边框你能够创建远角边框向矩形边框添加阴影使用图片来绘制边框 . CSS3的边框属性主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
[HTML] CSS3 边框
CSS3 边框用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...
CSS3边框温故
1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...
css3 边框记
css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...
CSS3 边框
说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器框模型背景和边框文本效果 2D/3D 转换动画多列布局用户界面 CS ...
第八十节，CSS3边框图片效果
CSS3边框图片效果学习要点: 1.属性初探 2.属性解释 3.简写和版本本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
css3边框与背景
一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上同 ...
第95天：CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
CSS3 边框圆角背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
CSS3边框border-radius
一.官方解释设置或检索对象使用圆角边框.提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数. ...

随机推荐

kafka 集群搭建
环境:ubuntu14.04 版本:jdk1.8,zookeeper 3.4.10,kafka 2.11 搭建步骤: 1. 搭建zookeeper集群参考链接:zookeeper集群搭建 2. 下载 ...
Java多线程之线程池详解
前言在认识线程池之前,我们需要使用线程就去创建一个线程,但是我们会发现有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因 ...
JDK8新特性一览
转载自:http://blog.csdn.net/qiubabin/article/details/70256683 官方新特性说明地址 Jdk8新特性.png 下面对几个常用的特性做下重点说明. 一 ...
JAVA基础2——类初始化相关执行顺序
类初始化相关执行顺序几个概念说明代码块的含义与作用 static静态代码块: 一般用于初始化类中的静态变量.比如:给静态的数组或者list变量赋初值.使用static静态代码块进行初始化与直接在定 ...
大数据查询——HBase读写设计与实践
导语:本文介绍的项目主要解决 check 和 opinion2 张历史数据表(历史数据是指当业务发生过程中的完整中间流程和结果数据)的在线查询.原实现基于 Oracle 提供存储查询服务,随着数据量的 ...
「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏
回味小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...
##6.2 Neutron计算节点-- openstack pike
##6.2 Neutron计算节点 openstack pike 安装目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##6.2 Neutron计算节 ...
Linux多线程编程详细解析----条件变量 pthread_cond_t
Linux操作系统下的多线程编程详细解析----条件变量 1.初始化条件变量pthread_cond_init #include <pthread.h> int pthread_cond_ ...
【Spring】多数据源导致自动化配置失败问题
一.问题描述笔者根据需求在开发过程中,需要在原项目的基础上(单数据源),新增一个数据源C,根据C数据源来实现业务.至于为什么不新建一个项目,大概是因为这只是个小功能,访问量不大,不需要单独申请个服务 ...
NOIP2017普及组解题报告
刚参加完NOIP2017普及,只考了210,于是心生不爽,写下了这篇解题报告...(逃第一次写博,望dalao们多多指导啊(膜第一题score,学完helloworld的人也应该都会吧,之前好多人 ...

【CSS3】边框

【CSS3】边框的更多相关文章

随机推荐

热门专题