CSS border-right-style属性设置元素的右边框样式

边框的样式指的是边框的线条属性，指的是边框采用的是实线效果、短线效果还是其它的线条效果。

border-right-style属性设置的是某一元素的右边框的样式。

语法格式如下：

border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

border-right-style属性适用于所有元素。

border-right-style属性值说明如下：

属性值 说明
none 无右边框。
dotted 右边框由点组成，形成点线效果。
dashed 右边框由短线组成，形成短线效果。
solid 右边框是实线。
double 右边框是双实线，形成双实线效果。
groove 右边框带有立体效果的沟槽。
ridge 右边框成脊形。
inset 右边框内嵌一个立体边框。
outset 右边框外嵌一个立体边框。

只有右边框和元素以及页面其它属性结合在一起的时候，才能真正展现其样式。上表中，groove、ridge、inset以及outset等和右边框颜色结合设置才能达到更好的效果。

border-right-style属性实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS border-right-style属性设置元素的右边框样式实例-www.manongjc.com</title>

<style type="text/css">

<!--

p{width:350px;}

.dotted{border-right-style:dotted;}

.dashed{border-right-style:dashed;}

.solid{border-right-style:solid;}

.double{border-right-style:double;}

.groove{border-right-style:groove;}

.ridge{border-right-style:ridge;}

.inset{border-right-style:inset;}

.outset{border-right-style:outset;}

-->

</style>

</head>

<body>

<p class="dotted">右边框由点组成，形成点线效果。</p>

<p class="dashed">右边框由短线组成，形成短线效果。</p>

<p class="solid">右边框是实线。</p>

<p class="double">右边框是双实线，形成双实线效果。</p>

<p class="groove">右边框带有立体效果的沟槽。</p>

<p class="ridge">右边框成脊形。</p>

<p class="inset">右边框内嵌一个立体边框。</p>

<p class="outset">右边框外嵌一个立体边框。</p>

</body>

</html>

　　

参考阅读：http://www.manongjc.com/article/1189.html

CSS border-right-style属性设置元素的右边框样式的更多相关文章

  1. zIndex 属性设置元素的堆叠顺序。

    http://www.w3school.com.cn/jsref/prop_style_zindex.asp zIndex 属性设置元素的堆叠顺序. 该属性设置一个定位元素沿 z 轴的位置,z 轴定义 ...

  2. [iOS微博项目 - 4.3] - 设置每条微博边框样式

    github: https://github.com/hellovoidworld/HVWWeibo A.设置每条微博边框样式 1.需求 不需要分割线 每个微博之间留有一定的间隙   2.思路 直接设 ...

  3. 使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding

    Ø  默认情况下,内部元素(如:input)的宽度或高度,是不会包含元素的边框和内边距的,这时就需要使用 box-sizing 属性设置该元素. Ø  box-sizing 是 CSS3 的属性,可以 ...

  4. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  5. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  6. javascript中DOM获取和设置元素的内容、样式及效果

    getElementById() 根据id获取dom元素 没有找到则返会Null <!DOCTYPE html> <html lang="en"> < ...

  7. draggable属性设置元素是否可拖动。

    设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...

  8. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  9. android dialog style属性设置

    <!--最近做项目,用到alertDialog,用系统自带的style很难看,所以查了资料自己定义了个style. res/value/style.xml内增加以下代码:--> <s ...

随机推荐

  1. 苹果HomeKit联手海尔的三大原因

    2014已成智能家居元年,无论是资本市场还是巨头企业无不把触角向这一领域延伸.刚有人称,智能家居将成三星和谷歌对决,但不成想,前几天的苹果WWDC大会上,苹果就发布了自家的智能家居平台HomeKit. ...

  2. HDU 1565

    http://acm.hdu.edu.cn/showproblem.php?pid=1565 先进行二分图黑白染色,S到黑,白到T,黑到白,问题转化成了求最大权独立集,最大点权独立集=sum-最小点权 ...

  3. BZOJ1071: [SCOI2007]组队【双指针】【思维好题】

    Description NBA每年都有球员选秀环节.通常用速度和身高两项数据来衡量一个篮球运动员的基本素质.假如一支球队里速度最慢的球员速度为minV,身高最矮的球员高度为minH,那么这支球队的所有 ...

  4. 控制input只输入数字--- onkeyup="value=value.replace(/[^\d]/g,'')"

    ☆ <td><input type="text" class="spInput" onkeyup="value=value.repl ...

  5. 使用animate()完成修改图片src切换图片的动画效果

    如下所示,在动画效果中的回调函数中进行src的修改和动画的切换 $(".TopImg").animate( {opacity:'toggle'}, "slow" ...

  6. c++hook全局触控事件

    https://gist.github.com/vbfox/1339671 namespace BlackFox { using System; using System.ComponentModel ...

  7. （1）集合 ---遍历map集合

    Map接口     实现Map接口的类用来存储键(key)-值(value) 对.Map 接口的实现类有HashMap和TreeMap等.Map类中存储的键-值对通过键来标识,所以键值不能重复. Ha ...

  8. Html页面Dom对象之Document

    Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对 ...

  9. 转 Apache Kafka：下一代分布式消息系统

    简介 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和可复制的提交 ...

  10. 在Win7下新建库并修改图标

    win7中在库中添加桌面方法详解 1.在空白处,鼠标右键选择新建——库. 2.命名为桌面,然后选择桌面. 3.鼠标右键选择属性. 4.点击包括文件夹. 5.选择桌面,点击包括文件夹按钮. 6.点击确定 ...