【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个参数. ...
随机推荐
- javaweb-1-B/S初论
一.B/S结构的基本概念 1.什么是动态网页 2.为什么需要动态网页 3.如何实现动态网页 4.为什么学习B/S技术 4.1C/S结构 优点: 1.C/S架构的界面和操作可以很丰富. 2.安全性能可以 ...
- Weblogic之简介
一.简介(来自百度百科) WebLogic是美国Oracle公司出品的一个application server,确切的说是一个基于JAVAEE架构的中间件,WebLogic是用于开发.集成.部署和 ...
- 永中DCS再添喜讯：顺利签约海信集团
近日,永中DCS与海信集团一起携手,共创文档在线预览新篇章.出于对永中DCS文档在线预览产品的品质与服务的信赖,海信集团选择永中DCS为其提供文档在线预览技术支持,助力移动化办公(EHR系统)发展,提 ...
- ajax的跨域请求
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- Linux 链接详解----静态链接实例分析
由Linux链接详解(1)中我们简单的分析了静态库的引用解析和重定位的内容, 下面我们结合实例来看一下静态链接重定位过程. /* * a.c */ ; void add(int c); int mai ...
- ASP.NET Core 一步步搭建个人网站（2）_一键部署和用户注册登录
俗话说,磨刀不费砍柴工.为了更方便的进行项目管理,我们先将个人网站项目配置一下,满足以下2个目标: VS2017中支持Git存储库,绑定Github项目,实现本地VS程序与线上Github一键代码提交 ...
- 腾讯 AI Lab 计算机视觉中心人脸 & OCR团队近期成果介绍（3）
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:周景超 在上一期中介绍了我们团队部分已公开的国际领先的研究成果,近期我们有些新的成果和大家进一步分享. 1 人脸进展 人脸是最重要的视觉 ...
- Linux常用基础命令
一.系统目录结构 约定俗成: bin (binaries)存放二进制可执行文件 sbin (super user binaries)存放二进制可执行文件,只有root才能访问 etc (e ...
- Java集合（2）一 ArrayList 与 LinkList
目录 Java集合(1)一 集合框架 Java集合(2)一 ArrayList 与 LinkList Java集合(3)一 红黑树.TreeMap与TreeSet(上) Java集合(4)一 红黑树. ...
- php 写程序求三个数的最大值
最简单的调用PHP自带的max函数即可:echo max(1,2,3,4,5);如果要自定义函数的话:function test($a,$b,$c){ return $a > $b ?($a & ...