精华内容
下载资源
问答
  • css3边框样式(示例代码)
    千次阅读
    2021-08-05 01:20:27

    我们在设计网页样式的时候,经常会用到边框,那么css中的边框具体有哪些样式呢,下面我们来看。

    首先,在css中设置border的时候,我们一般给给出三个值,线条样式,线条粗细,线条颜色。

    以上的三个值,线条样式是必须要设置的,否则边框则无法显示到页面上,border的线条样式有四种,分别是:

    实线(solid)

    点线(dotted)

    双实线(double)

    虚线(dashed)

    粗细和颜色可以默认,粗细默认是3px,颜色是根据当前元素的文本颜色决定的。

    所以我们一般在初始border的时候可以这样写:元素名称.{border:solid 1px red;},同时将三个值设定好

    然后我们来看border除了默认出现四个框之外还能有哪些应用。

    第一,使用border划出分割线

    我们知道,在html中可以使用hr来划出分割线,但是hr的分割线无法设置粗细样式,使用起来很不方便。

    于是我们可以使用border来给某个元素设置一个上边框或者下边框来实现分割线的效果。

    具体代码如下:

    p{border-bottom:solid 1px red;}

    表示给p元素设置了一个1px的红色下框线,再调整一下border的位置,就实现了分割线的效果。

    同样也可以选择使用border其他边线来设置成不同的效果

    第二,使用border给元素形状添加圆角效果

    我们在网页中看到的元素块不仅仅是方方正正的矩形,有时候会出现圆角,那么是怎么实现的呢?

    也是border边框的应用。

    代码是p:{border:solid 1px red;

    border-radius:3px;}

    表示给p元素加了一个半径为3px的圆角,3px表示圆角的弧度大小,值越高,弧度越大

    必须先给出border的样式才能设置圆角,否则无法在页面显示。

    以上,就是css中border边框的一些实际应用,还有更多的样式让我们一起来发现。

    更多相关内容
  • CSS 边框样式

    2020-09-24 11:21:46
    本节我们来学习边框样式,主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时,可以分为上下左右四个边框,既可以同时设置四个边框的样式,也可以分开设置四个边框的样式。 关于...

    本节我们来学习边框样式,主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时,可以分为上下左右四个边框,既可以同时设置四个边框的样式,也可以分开设置四个边框的样式。

    关于边框样式的四个属性:

    属性描述
    border-width设置边框的宽度
    border-style设置边框的样式
    border-color设置边框的颜色
    border在一个声明中设置所有的边框属性

    border-width

    border-width 属性用于设置边框的宽度,也就是边框的粗细。

    常用属性值如下所示:

    属性值描述
    thin定义细的边框
    medium默认,定义中等的边框
    thick定义粗的边框
    length自定义边框的宽度,单位为像素px
    inherit规定应该从父元素继承边框宽度

    我们一般会使用 length 作为 border-width 属性的属性值,即设置边框的粗细为多少像素,例如 1px2px3px 等。border-width 属性可以同时为所有边框设置宽度,也可以单独地为每个边框设置宽度。

    示例:

    为上、右、下、左四个边框分别设置边框粗细:

    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    

    根据简写属性 border-width,我们也可以直接写成:

    border-width:1px 2px 3px 4px;
    

    记住在简写时,为边框设置宽度的顺序为 上、右、下、左,是顺时针顺序。

    而当元素的上下边框或左边框的宽度一致时,也可以使用简写,例如上下边框为1px、左右边框为2px,可以写成:

    border-width:1px 2px;
    

    border-style

    border-style 属性用于设置元素的边框样式。和 border-width 一样,可以同时为四个边框设置边框样式,也可以分别为每个边框单独设置边框样式。

    border-style 的属性值有很多个,但是在实际网页制作中,常用属性值有下面四种:

    属性值描述
    dotted定义点状边框
    dashed定义虚线边框
    solid定义实线边框
    none无边框
    示例:

    例如设置上、右、下、左的边框样式为实线、虚线、实线、虚线:

    border-top-style:solid;
    border-right-style:dashed;
    border-bottom-style:solid;
    border-left-style:dashed;
    

    可以简写成:

    border-style: solid dashed solid dashed; 
    

    当元素的上下边框和左右边框样式一致时,也可以写成:

    border-style: solid dashed; 
    

    border-color

    border-color 属性可以用于设置边框颜色。属性值可以是任何合法的颜色值,例如颜色名、十六进制颜色值、RGB颜色值等。

    border-color 属性同样可以同时设置四个边框的颜色,也可以单独设置四条边框的颜色。

    示例:

    例如设置上、右、下、左边框颜色为红黄蓝绿:

    border-top-color:red;
    border-right-color:yellow;
    border-bottom-color:blue;
    border-left-color:green;
    

    可以简写为:

    border-color:red yellow blue green;
    

    border

    上面我们讲了 border-widthborder-styleborder-color 三个属性,但是其实我们在实际应用中,一般不会单独来设置边框宽度或者颜色等,而是直接使用通过 border 简写属性来设置所有的边框属性。

    border 属性可以直接设置所有边框的样式,如果要单独设置每个边框的样式则可以使用 border-topborder-rightborder-bottomborder-left

    示例:

    将下面这个<div> 标签的边框设置成 3像素、虚线、紫色:

    <!DOCTYPE>
    <html>
        <head>
        	<meta charset="utf-8">
            <title>CSS学习(9xkd.com)</title>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body>
            <div>设置一个边框</div>
        </body>
    </html>
    

    CSS 样式代码:

    div{
    	width: 100px;
    	height: 100px;
    	border:3px dashed purple;
    }
    

    在浏览器中的演示效果:

    链接:https://www.9xkd.com/

    展开全文
  • css边框样式

    2016-03-10 12:58:34
    边框样式 1.边框类型  border-style:    (1)solid 实线边框  (2)double 双线边框,两条边框线的距离是:border-width  以下边框根据border-color颜色值画出  (3)groove 3D凹槽边框  (4)...

    边框样式


    1.边框类型

     border-style:
     
     (1)solid    实线边框
     (2)double    双线边框,两条边框线的距离是:border-width

     以下边框根据border-color颜色值画出

     (3)groove    3D凹槽边框

     (4)ridge    菱形边框

     (5)inset    3D凹边

     (6)outset    3D凸边

    <!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=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <link rel="stylesheet" type="text/css" href="1.css"/>
    <div></div>
    </body>
    </html>
    

    @charset "utf-8";
    /* CSS Document */
    div
    {
    	width:200px;
    	height:200px;
    	background-color:#0F9;
    	border-style:solid;
    }
    



    2.边框颜色

      border-color

      设置一个颜色:四个边框用一个颜色画出

      设置两个颜色:第一个颜色用于画出上下边框的颜色,第二个颜色用于画出左右边框的颜色//以空格分开

      设置四个颜色:按上右下左的顺时针顺序指定四个边框的颜色

      我们用设置两个颜色的来举例 其余同理

    <!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=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <link rel="stylesheet" type="text/css" href="1.css"/>
    <div></div>
    </body>
    </html>
    

    @charset "utf-8";
    /* CSS Document */
    div
    {
    	width:200px;
    	height:200px;
    	background-color:#0F9;
    	border-style:solid;
    	border-color:#000 #FF0000;
    }
    



    3.边框宽度

     border-width

     把css里面做些修改就可以

    @charset "utf-8";
    /* CSS Document */
    div
    {
    	width:200px;
    	height:200px;
    	background-color:#0F9;
    	border-style:solid;
    	border-color:#000 #FF0000;
    	border-width:30px;
    }
    



    4.分别设置各个边框

      border-top,border-right,border-bottom,border-left

      例如:border-top:ridge 10px red;

      只要把边框的类型 颜色 宽度写出来就可以 不用考虑顺序

     

    @charset "utf-8";
    /* CSS Document */
    div
    {
    	width:200px;
    	height:200px;
    	background-color:#0F9;
    	border-top:ridge 10px red;
    }
    



    5.综合声明边框

     border

     例如:border:groove 20px blue;

    @charset "utf-8";
    /* CSS Document */
    div
    {
    	width:200px;
    	height:200px;
    	background-color:#0F9;
    	border:groove 20px blue;
    }
    




    展开全文
  • CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用,几乎都是标签样式 CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用,几乎都是标签样式
  • 比如这样一个CSS 复制代码代码如下: .td3{ font-size: 14px; color: #FFFFFF; background-color: #000000; BORDER-RIGHT: #f6f6f6 1px solid; //显示右边框为1px,如果不想显示就为0px BORDER-TOP: #f9f9f9 0px ...
  • 6款CSS特效边框样式

    千次阅读 2020-07-06 15:31:25
    6框CSS特效边框样式 1.创建一个css文件写入下面代码 button { background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 2px #f45e61; color: #f45e61; font-size: inherit; font-...

    6款CSS特效边框样式

    1.创建一个css文件写入下面代码

    button {
        background: none;
        border: 0;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 2px #f45e61;
        color: #f45e61;
        font-size: inherit;
        font-weight: 700;
        margin: 1em;
        padding: 1em 2em;
        text-align: center;
        text-transform: capitalize;
        position: relative;
        vertical-align: middle;
      }
      button::before, button::after {
        box-sizing: border-box;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
      }
      
      .draw {
        -webkit-transition: color 0.25s;
                transition: color 0.25s;
      }
      .draw::before, .draw::after {
        border: 2px solid transparent;
        width: 0;
        height: 0;
      }
      .draw::before {
        top: 0;
        left: 0;
      }
      .draw::after {
        bottom: 0;
        right: 0;
      }
      .draw:hover {
        color: #2415f3;
      }
      .draw:hover::before, .draw:hover::after {
        width: 100%;
        height: 100%;
      }
      .draw:hover::before {
        border-top-color: #2415f3;
        border-right-color: #2415f3;
        -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
                transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
      }
      .draw:hover::after {
        border-bottom-color: #2415f3;
        border-left-color: #2415f3;
        -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
                transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
      }
      
      .meet:hover {
        color: #068b2e;
      }
      .meet::after {
        top: 0;
        left: 0;
      }
      .meet:hover::before {
        border-top-color: #068b2e;
        border-right-color: #068b2e;
      }
      .meet:hover::after {
        border-bottom-color: #068b2e;
        border-left-color: #068b2e;
        -webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
                transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
      }
      
      .center:hover {
        color: #c40eab;
      }
      .center::before, .center::after {
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -webkit-transform-origin: center;
            -ms-transform-origin: center;
                transform-origin: center;
      }
      .center::before {
        border-top: 2px solid #c40eab;
        border-bottom: 2px solid #c40eab;
        -webkit-transform: scale3d(0, 1, 1);
                transform: scale3d(0, 1, 1);
      }
      .center::after {
        border-left: 2px solid #c40eab;
        border-right: 2px solid #c40eab;
        -webkit-transform: scale3d(1, 0, 1);
                transform: scale3d(1, 0, 1);
      }
      .center:hover::before, .center:hover::after {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
        -webkit-transition: -webkit-transform 0.5s;
                transition: transform 0.5s;
      }
      
      .spin {
        width: 6em;
        height: 6em;
        padding: 0;
      }
      .spin:hover {
        color: #0eb7da;
      }
      .spin::before, .spin::after {
        top: 0;
        left: 0;
      }
      .spin::before {
        border: 2px solid transparent;
      }
      .spin:hover::before {
        border-top-color: #0eb7da;
        border-right-color: #0eb7da;
        border-bottom-color: #0eb7da;
        -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
                transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
      }
      .spin::after {
        border: 0 solid transparent;
      }
      .spin:hover::after {
        border-top: 2px solid #0eb7da;
        border-left-width: 2px;
        border-right-width: 2px;
        -webkit-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
                transform: rotate(270deg);
        -webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
                transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
      }
      
      .circle {
        border-radius: 100%;
        box-shadow: none;
      }
      .circle::before, .circle::after {
        border-radius: 100%;
      }
      
      .thick {
        color: #f45e61;
      }
      .thick:hover {
        color: #fff;
        font-weight: 700;
      }
      .thick::before {
        border: 3em solid transparent;
        z-index: -1;
      }
      .thick::after {
        mix-blend-mode: color-dodge;
        z-index: -1;
      }
      .thick:hover::before {
        background: #f45e61;
        border-top-color: #f45e61;
        border-right-color: #f45e61;
        border-bottom-color: #f45e61;
        -webkit-transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
        transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
      }
      .thick:hover::after {
        border-top: 3em solid #f45e61;
        border-left-width: 3em;
        border-right-width: 3em;
      }
    

    2.在Html页面引入并使用

    <link rel="stylesheet" href="./css/你的css文件名称">
    
    <div class="btn-class">
         <button class="draw">draw</button>
         <button class="draw meet">draw meet</button>
         <button class="center">center</button>
         <button class="spin">spin</button>
         <button class="spin circle">spin circle</button>
         <button class="spin thick">spin thick</button>
    </div>
    

    3.接下来在浏览器中打开你就可以看到酷炫的动画了

    在这里插入图片描述

    展开全文
  • html-css设置标签样式过程中可能会发现所设置的样式不起作用,其实只要掌握以下两点便可解决问题
  • I have a little question concerning html-lists and CSS. I want to have a list (whit sublist) that looks like this (view the result by coping the code into http://htmledit.squarefree.com/):ul{border: 0...
  • 一、效果图 二、用途:可用于按时间进程显示信息的视图 三、代码:https://codepen.io/wlei/pen/wQvRqm
  • 更多相关博文请查看【JavaWeb学习之路】 本文目录1. 前言2. 边框的样式3....可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。 <p class="border-solid"> 演示实线
  • 边框样式 图片边框 局部边框 列表样式
  • border-style边框样式 : { { : {{ none | 无 | hidden | 隐藏 dotted | 点缀 | dashed | 虚线 | solid | 固体 | double | 双 | groove | 凹槽 | ridge | 脊 inset | 插图 outset } 一开始 } 1 to 4 values | 1〜4个...
  • 7款CSS3制作美化的搜索框样式代码,各种形式,包含css文件,可直接引用 7款CSS3制作美化的搜索框样式代码,各种形式,包含css文件,可直接引用 7款CSS3制作美化的搜索框样式代码,各种形式,包含css文件,可直接引用
  • 表格边框的粗细在css中可以轻松实现,不会的朋友可以参考下
  • CSS 边框

    2021-01-19 21:17:13
    CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框   红色底部边框   圆角边框   左侧边框带宽度,颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的...
  • HTML—CSS边框样式

    千次阅读 2019-04-18 22:10:14
    当有一方为设置属性时,其属性默认取和对面一样的属性。 左<——>右 上<——>下 当只有一个属性时,则默认应用于四方(上右下左)。
  • 你是这样的 CSS,19个唯美的边框

    千次阅读 多人点赞 2021-11-12 08:08:26
    作者:niemvuilaptrin 译者:前端小智 来源:medium 有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 ... 今天,分享一波唯美的边框,可增加我们的项目"亮"点,让用户爱起来。...CSS Animati.
  • 在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • css边框属性

    千次阅读 2021-03-26 16:54:43
    一:css边框属性 1.上边框: border-top-style:样式 border-top-width:宽度 border-top-color:颜色 border-top:宽度,样式,颜色 2.下边框: border-bottom-style:样式 border-bottom-width:宽度 border-bottom-color...
  • 7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css,非常酷炫
  • 元素的边框(border)是围绕元素内容和内边距的一条或多条线CSS border 属性允许你规定边框样式 宽度和颜色CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果...
  • style type=”text/css”> TABLE { background: blue; border-collapse: separate; border-spacing: 10pt; border-top: 15px solid red; border-left: 15px solid red; border-right: 5px dashed black; border-...
  • CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情况下这种颜色是从ps中获取的*/ font-size: 20px; /...
  • 1. 动画CSS边框 当我们想使我们的项目更可见时,该怎么办? 来给它做个动画! 我们可以对我们的边框进行动画化处理,甚至在不改变元素大小的情况下也可以进行动画化处理,非常简单。 要做到这一点,我们只需要为...
  • 最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置 visibility: ...
  • 就在我绞尽脑汁的时候,灵光乍现,为什么不尝试一下用CSS3多背景来模拟边框呢,背景是可以设置长度的,通过修改背景的长度,就可以实现要求的动效。说干就干,赶快从网上搜索一下CSS3背景的相关知识。 CSS3 Backgro
  • table完美css样式 table表格边框样式

    千次阅读 2021-06-18 03:06:37
    蕃薯耀2016年6月15日星期三一、的css样式边框线不会重复叠加,不会有些粗有些细,全部统一。/**/-{/*-moz--;--border-radius:5px;border-radius:5px;*/width:100%;border:solid#333;border-width:1px0px0px1px;font-...
  • 这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。
  • css3中边框的4种样式

    万次阅读 2016-07-08 11:44:56
    css3的边框有4种样式: 1.border-color(边框的颜色) 一般设置边框都有3个属性-宽度、线的样式、颜色,如果宽度设置了很多PX,那么就可以给边框设置很多颜色,让边框显示出渐变的效果,不过设置边框不同颜色...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 113,780
精华内容 45,512
关键字:

css边框样式

友情链接: xuanya01.rar