css 常用边框属性

  • 概览
参数 释义
border u设置边框属性（可以多个）
border-color 边框颜色
border-style 边框样式
solid 实线，dotted 点状线，dashed 虚线
border-width 边框粗细
border-left-color 左边框颜色（上下左右均可单独设置）
border-left-style 左边框样式（上下左右均可单独设置）
border-left-width 左边框高度（上下左右均可单独设置）
border-radius 圆角处理
box-shadow 必写参数：x 轴偏移，y 轴偏移，x 与 y 均接受负值
非必写参数：模糊度，扩散程度，阴影颜色，内阴影设置
  • 举例
  • html 部分
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">

            <p>

                1234567890 <br>

                1234567890 <br>

                1234567890 <br>

            </p>

        </div>

        <div class="box2">

            <p>

                abcdefghijklmnopqrstuvwxyz <br>

                abcdefghijklmnopqrstuvwxyz <br>

                abcdefghijklmnopqrstuvwxyz <br>

            </p>

        </div>

        <div class="box3">

            <p>

                一二三四五六七八九十 <br>

                一二三四五六七八九十 <br>

                一二三四五六七八九十 <br>

            </p>

        </div>

    </body>

</html>
  • css 部分
*{

    width: 80%;

    height: 100px;

}

.box1{

    border: 3px solid black;            /* 多个属性设置：3px 实线 黑色 */

    border-radius: 20px;                /* 圆角 */

    box-shadow: 10px 10px 5px #888888;

    margin-bottom: 15px;                /* 设置间距，具体见之后的随笔 */

}

.box2{

    border-width: 3px;                  /* 单个属性设置 */

    border-style: dotted;               /* 点状线 */

    border-top-color: red;

    border-bottom-color: blue;

    border-left-color: orange;

    border-right-color: yellow;

    border-radius: 15% 50px;           /* 左下右下为 15% 右上左下为 50px */

    margin-bottom: 15px;

}

.box3{

    border-left-width: 3px;

    border-left-style: dashed;          /* 虚线 */

    border-right: 6px solid;            /* 两个属性设置 */

    border-radius: 15px 30px 45px 60px; /* 左上为起点，顺时针走 */

}
  • 效果截图

[Web 前端] 010 css 常用的边框设置的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. [Web 前端] 009 css 常用的文本样式设置

    常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...

  3. 【WEB前端】CSS常用选择器

    1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  6. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  7. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  8. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  9. 必知干货：Web前端应用十种常用技术你全都知道吗？

    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...

随机推荐

  1. cocos随笔

    随笔:  [ 1 ] active能隐藏元素,且不占空间,但仍存在,索引时,仍能得到 [ 2 ] 碰到参数传不进去的时候可以试着用属性赋值的方法代替传参 [ 3 ] getChildByName是按照 ...

  2. 【LuoguP4916】魔力环

    题目链接 题意 求出 \(n\) 个珠子的在旋转同构意义下的手 环 个数,满足以下条件: 恰好有 \(m\) 个黑色珠子,其余为白色. 黑色珠子形成的最长连续段不能超过 \(k\) 个. Sol 考虑 ...

  3. MVC模式 和 MVVM模式

    MVC模式 模型 - 视图 - 控制器或MVC,MVC是普遍的叫法,是一种软件设计模式,用于开发Web应用程序.模型- 视图 - 控制器模式是由以下三部分组成: 模型/Model - 一个负责维护数据 ...

  4. 【微信小程序】setData的使用以及注意事项

    Page.prototype.setData(Object data, Function callback) setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.da ...

  5. JSP上传一个文件夹

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...

  6. Spring Cloud架构教程 （八）消息驱动的微服务（消费组）【Dalston版】

    使用消费组实现消息消费的负载均衡 通常在生产环境,我们的每个服务都不会以单节点的方式运行在生产环境,当同一个服务启动多个实例的时候,这些实例都会绑定到同一个消息通道的目标主题(Topic)上. 默认情 ...

  7. Last Defence

    Given two integers A and B. Sequence S is defined as follow: • S0 = A •S1 = B • Si = |Si−1 − Si−2| f ...

  8. SQL语句之-简单查询

       SQL 语句的语法顺序是: SELECT[DISTINCT] FROM WHERE GROUP BY HAVING UNION ORDER BY 一.查询SELECT 1.查询全部列:SELEC ...

  9. 论文keywords和规则匹配的baseline

    详细的思路可以参照小论文树立0317 关键词分为以下几类: t/****一些通用的过滤词,这些通用的过滤词可以使用和节目一起出现的词语,结合tf-idf看出来么?*****/    public st ...

  10. 基于python实现自动化办公学习笔记三

    Excel(1)写xls文件 # 有序字典from collections import OrderedDict# 存储数据from pyexcel_xls import save_data def ...