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. magento的布局文件之谜

    magento的布局文件layout.xml文件详解 解析顺序 布局xml文件一般位于app/design/{area}/{package}/{theme}/layout/目录下.Layout文件一般 ...

  2. opencv实现遍历文件夹下所有文件

    前言 最近需要将视频数据集中的每个视频进行分割,分割成等长的视频片段,前提是需要首先遍历数据集文件夹中的所有视频. 实现 1.了解opencv中的Directory类: 2.实现测试代码: 系统环境 ...

  3. 网络编程初探--使用UDP协议的简易聊天室

    UDP是一种无连接的传输层协议,提供快速不可靠的服务. 一.发送端 * 创建UDP发送端 * 步骤: * 1.建立UDP的Socket服务 * 2.将要发送的数据封装到数据包中 * 3.通过UDP的s ...

  4. Elasticsearch 索引的全量/增量更新

    Elasticsearch 索引的全量/增量更新 当你的es 索引数据从mysql 全量导入之后,如何根据其他客户端改变索引数据源带来的变动来更新 es 索引数据呢. 首先用 Python 全量生成 ...

  5. 概率DP HDU 4586 play the dice

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4586 解题思路: 只考虑第一次,获得的金币的平均值为sum/n.sum为所有色子的面的金币值相加. ...

  6. 移动端 元素外面使用伪类after加边框 导致其内部元素无法选中

    解决方法:给内部元素增加属性 position: relative; z-index: 3; 这样就能选中其内部元素了.

  7. redis sentinel 高可用（HA）方案部署，及python应用示例

    redis sentinel(哨兵)高可用集群的部署方法,并通过 python 程序实例讲解如何使用 redis sentinel 简介 介绍 redis sentinel(哨兵)集群的部署,配置一主 ...

  8. ElasticSearch 5.0 简介

    参考:http://blog.csdn.net/wzhg0508/article/details/52063676 Elasticsearch 5.0 简介(medcl微信直播实录) 大家好,非常高兴 ...

  9. TensorFlow笔记-03-张量,计算图,会话

    TensorFlow笔记-03-张量,计算图,会话 搭建你的第一个神经网络,总结搭建八股 基于TensorFlow的NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数) ...

  10. log4j的格式化打印

    log4j.properties的文件内容如下 log4j.rootLogger=INFO, stdoutlog4j.appender.stdout=org.apache.log4j.ConsoleA ...