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. 【转载】Java枚举类型的使用

    枚举类型概念 package com.lxq.enumm; public class EnumDemoOne { private enum InnerEnum { RED, GREEN, YELLOW ...

  2. 【linux】wifi不能使用的问题

    Worked solution (Requirements: kernel >=4.11) : Download driver directory from this repo:https:// ...

  3. Nginx+Keepalive实现高可用负载均衡

    1.准备2台服务器 服务器名LB1,假设IP为192.168.1.100 服务器名LB2,假设IP为192.168.1.101 2.在LB1,LB2上分别安装Nginx 步骤参照:http://blo ...

  4. Markdown的写法

    这里只介绍Markdown的书写格式.在github中显示出来. 当你看到下面两张图片时,你会发现区别还是蛮大的. 标题: 首先>就是最左边的那条竖线,但是=(最高阶标题)和-(第二阶标题). ...

  5. # 20155327 2016-2017-4 《Java程序设计》第七周学习总结

    20155327 2016-2017-4 <Java程序设计>第七周学习总结 教材学习内容总结 了解Lambda语法 包含三个部分 一个括号内用逗号分隔的形式参数,参数是函数式接口里面方法 ...

  6. Codeforces123E. Maze【树形dp】【概率dp】【证明题】

    LINK 题目大意 一棵树,上面的每个点都有一定概率成为起点和终点 从起点出发,随机游走,并按照下列规则统计count: DFS(x) if x == exit vertex then finish ...

  7. hive中实现类似MySQL中的group_concat功能

    hive> desc t; OK id      string str     string Time taken: 0.249 seconds hive> select * from t ...

  8. aircrack-ng 工具集学习

    一.aircrack-ng简介 aircrack-ng是Aircrack项目的一个分支.是一个与802.11标准的无线网络分析有关的安全软件,主要功能有:网络侦测,数据包嗅探,WEP和WPA/WPA2 ...

  9. prisma 集成 pipelinedb测试

    pipelinedb 是一个基于pg数据库开发的stream sql 数据库,和prisma 集成起来可以开发很 方便的stream 应用 使用docker 安装 项目初始化 prisma init ...

  10. TensorFlow笔记-04-神经网络的实现过程,前向传播

    TensorFlow笔记-04-神经网络的实现过程,前向传播 基于TensorFlow的NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数),得到模型 张量(tenso ...