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. echarts折线图柱状图的坐标轴的颜色及样式的设置

    基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...

  2. 特征工程 —— 特征重要性排序（Random Forest）

    树模型天然会对特征进行重要性排序,以分裂数据集,构建分支: 1. 使用 Random Forest from sklearn.datasets import load_boston from skle ...

  3. shell 脚本实战笔记(8)--ssh免密码输入执行命令

    前言: ssh命令, 没有指定密码的参数. 以至于在脚本中使用ssh命令的时候, 必须手动输入密码, 才能继续执行. 这样使得脚本的自动化执行变得很差, 尤其当ssh对应的机器数很多的时候, 会令人抓 ...

  4. with() {} 的用法

    var use = "other"; var katana = { isSharp: true, use: function(){ this.isSharp = !!this.is ...

  5. python去掉字符串'\xa0'

    AssertionError: '5\xa0e\xa0*\xa0*\xa0*\xa05' != '5e***5'mystr = '5\xa0e\xa0*\xa0*\xa0*\xa05'mystr = ...

  6. SUST OJ 1675: Fehead的项目（单调栈）

    1675: Fehead的项目 时间限制: 1 Sec  内存限制: 128 MB提交: 41  解决: 27[提交][状态][讨论版] 题目描述 Fehead俱乐部接手了一个项目,为了统计数据,他们 ...

  7. ElasticSearch（七）：ElasticSearch集群的搭建

    由于资源有限,使用是一台机器上安装三个elasticSearch服务端组成的集群. 1. 安装elasticSearch6.3.2 将原本安装的elasticSearch6.3.2复制两份,分别重新命 ...

  8. Springboot集成mybatis(mysql),mail,mongodb,cassandra,scheduler,redis,kafka,shiro,websocket

    https://blog.csdn.net/a123demi/article/details/78234023  : Springboot集成mybatis(mysql),mail,mongodb,c ...

  9. Html页面Dom对象之Document

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

  10. 好使-利用python 下paramiko模块无密码登录

    [root@salt-minion02 paramiko]# vim baoleiji4.py # -*- coding:utf-8 -*-import paramikoprivate_key = p ...