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. Tensorflow 多gpu训练

    Tensorflow可在训练时制定占用那几个gpu,但如果想真正的使用多gpu训练,则需要手动去实现. 不知道tf2会不会改善一下. 具体参考:https://wizardforcel.gitbook ...

  2. shell安装mysql，连接数据库，创建数据库

    https://blog.csdn.net/yhflyl/article/details/83061126 https://blog.csdn.net/wyl9527/article/details/ ...

  3. 【学习】020 Redis

    Java缓存机制 Java中要用到缓存的地方很多,首当其冲的就是持久层缓存,针对持久层谈一下:  要实现java缓存有很多种方式,最简单的无非就是static HashMap,这个显然是基于内存缓存, ...

  4. Symbol的isConcatSpreadable方法

    Symbol.isConcatSpreadable 布尔值,对象用于Array.prototype.concat()时,是否可以展开 let arr1 = ['c', 'd']; ['a', 'b'] ...

  5. unkown类型

    1,任何类型的值都可以赋给 unkown类型 2. 如果没有类型断言或基于控制流的类型细化时 unknown 不可以赋值给其它类型,此时它只能赋值给 unknown 和 any 类型 3. 如果没有类 ...

  6. 前端每日实战：14# 视频演示如何用纯 CSS 创作一种侧立图书的特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视频是可以交 ...

  7. 关于sass、scss、less的概念性知识汇总

    这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...

  8. Bean的生命周期与JVM**

    案例: 在service里定义了一个全局变量,这类变量只能是final的.如果不是,在代码中一旦有地方给该变量进行业务赋值.当不满足赋值条件时变量仍然保留上次的赋值的值. 这是因为Bean没有销毁. ...

  9. LA 4327 Parade(单调队列优化dp)

    题目链接: 题目大意(摘自刘汝佳<<算法竞赛入门经典--训练指南>>):F城是由n+1条横向路和m+1条竖向路组成.你的任务是从最南边的路走到最北边的路,使得走过的路上的高兴值 ...

  10. day03记 angular代码

    一.AngularJs AngularJS 是一个 JavaScript 框架.通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 1.四大特征 MVC模式.模块化.自动化双向数据绑 ...