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. shell 脚本实战笔记(4)--linux磁盘分区重新挂载

    背景: Hadoop的HDFS文件系统的挂载, 默认指定的文件目录是/mnt/disk{N}. 当运维人员, 不小心把磁盘挂载于其他目录, 比如/mnt/data, /mnt/disk01, /mnt ...

  2. c++野(wild)指针与悬空(dangling)指针

    re 1.https://www.cnblogs.com/idorax/p/6475941.html end

  3. 【opencv基础】图像翻转cv::flip详解

    前言 在opencv中cv::flip函数用于图像翻转和镜像变换. 具体调用形式 void cv::flip( cv::InputArray src, // 输入图像 cv::OutputArray ...

  4. 【linux基础】生成目录下所有图片的路径

    command ls *.jpg > list.txt result .png .png .png .png .png command ls /home/xxx/input/*.png > ...

  5. word-如何将文字设置为插入超链接

    前言 使用word有时候想要将文字部分设置为插入超链接,本文对此进行介绍. 操作步骤 1. 输入需要插入链接的文字部分: 2. 选中文字部分单击右键,点击超链接进行插入: 具体操作如下图所示: 参考 ...

  6. Unity 3D游戏-消消乐（三消类）教程和源码

    Unity 消消乐教程和源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Start Game -- ...

  7. Django Rest FrameWork 全部API

    Django Rest FrameWork .Requests 请求 客服端发送给服务器的请求 .Responses 响应 rest框架支持响应不同格式的内容 .Views 视图 base基础类视图 ...

  8. frameset的用法

    碰到一个frameset的问题,因为我比较懒,就先从网上拿来一篇基础知识,呵呵,好记性不如烂笔头啊        所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <FRAMESE ...

  9. dockercompose up build fail

    docker https://auth.docker.io/token dial tcp lookup auth.docker.io i/o timeo Error response from dae ...

  10. stenciljs 学习二 pwa 简单应用开发

    stenciljs 介绍参考官方网站,或者 https://www.cnblogs.com/rongfengliang/p/9706542.html demo 项目使用脚手架工具 创建项目 使用脚手架 ...