div 中如何加各种边框(转)
这个属性用来设定上下左右边框的风格,它的值如下:
none (没有边框,无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
示例:分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例
<html>
<head>
<title>边框风格属性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
<br>
<div class = "d1">这个div的CSS边框风格(border-style)属性是none。</div>
<br>
<div class = "d2">这个div的CSS边框风格(border-style)属性是solid。</div>
<br>
<div class = "d3">这个div的CSS边框风格(border-style)属性是dotted。</div>
<br>
<div class = "d4">这个div的CSS边框风格(border-style)属性是dashed。</div>
<br>
<div class = "d5">这个div的CSS边框风格(border-style)属性是double。</div>
<br>
<div class = "d6">这个div的CSS边框风格(border-style)属性是groove。</div>
<br>
<div class = "d7">这个div的CSS边框风格(border-style)属性是ridge。</div>
<br>
<div class = "d8">这个div的CSS边框风格(border-style)属性是inset。</div>
<br>
<div class = "d9">这个div的CSS边框风格(border-style)属性是outset。</div>
<br>
</body>
</html>
这个div的CSS边框风格(border-style)属性缺省值是none。
这个div的CSS边框风格(border-style)属性是none。
这个div的CSS边框风格(border-style)属性是solid。 直线式边框
这个div的CSS边框风格(border-style)属性是dotted。点线式边框
这个div的CSS边框风格(border-style)属性是dashed。 破折线式边框
这个div的CSS边框风格(border-style)属性是double。 双线式边框
这个div的CSS边框风格(border-style)属性是groove。槽线式边框
这个div的CSS边框风格(border-style)属性是ridge。脊线式边框
这个div的CSS边框风格(border-style)属性是inset。内嵌效果
这个div的CSS边框风格(border-style)属性是outset。 突起效果
div 中如何加各种边框(转)的更多相关文章
- div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- div中的“内容”水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- 如何给div加一个边框border样式
如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...
- word中几个好用的宏代码(立方米上标、关闭样式自动更新、删除无效样式、表格加粗边框、宋体引号)
Sub 替换立方米() With Selection.Find .Text = "m3" .Replacement.Text = "mm3" .Forward ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...
- MVC中实现加载更多
需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多) 每次加载时显示“正在 ...
- “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法
最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...
随机推荐
- jQuery和CSS 3定制HTML 5视频播放器
目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...
- 一段实现页面上的图片延时加载的js
大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...
- [Everyday Mathematics]20150227
(Marden's Theorem) 设 $p(z)$ 是三次复系数多项式, 其三个根 $z_1,z_2,z_3$ 不共线; 再设 $T$ 是以 $z_1,z_2,z_3$ 为顶点的三角形. 则存在唯 ...
- 开启Nginx的gzip压缩功能详解
默认情况下,Nginx的gzip压缩是关闭的, gzip压缩功能就是可以让你节省不少带宽,但是会增加服务器CPU的开销哦,Nginx默认只对text/html进行压缩 ,如果要对html之外的内容进行 ...
- win下 golang 跨平台编译
mac 下编译其他平台的执行文件方式请参看这篇文章,http://www.cnblogs.com/ghj1976/archive/2013/04/19/3030703.html 本篇文章是win下的 ...
- 性能测试之系统监控工具nmon
一.概述 本篇文章主要讲解nmon,以下为目录 1.nmon介绍 2.nmon下载.安装及使用 3.nmon analysis 分析及使用,各个项的含义 二.详细信息: 1.nmon介绍: nmon( ...
- 【C#】构造函数的特点
1.它的函数名与类名相同:2.它可以重载:3.不能指定返回类型,即使是void也不行:4.虽然在一般情况下,构造函数不被显式调用,而是在创建对象时自动被调用.但是并不是不能被显示调用.有些时候是一定要 ...
- 标准IO
标准IO由ISO C 标准的IO库,它处理了很多底层细节,比如合适的缓冲大小等等,因此更易于使用,但是也引入了一些其他问题. 流向 标准IO使用FILE对象关联流,流可以是面向宽字节的也可以是面向单字 ...
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
- CentOS 5.5 快速安装MariaDB-5.5.35
被网上各种教程坑的不轻T,T,5.5下不升级yum的情况下想快速安装还真有点费劲 至于源码编译安装坑貌似更多 而且在小内存的VPS上编译实在费力 下载地址 http://yum.mariadb.org ...