HTML&CSS基础-边框简写属性

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box{

                width: 200px;

                height: 200px;

                background-color: red;

                /**

                 *     设置边框

                 *         大部分的浏览器中，边框的宽度都是有默认值，而边框的样式默认值都是none

                 */

                /*border-width: 10px;

                border-color: yellow;

                border-style: solid;*/

                /**

                 *     border:

                 *         边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色，而且没有任何的顺序要求

                 *         border一指定就是四个边不能分别指定每个边的样式，宽度，颜色。

                 *

                 * border-top,border-bottom,border-left,border-right可以单独设置四个边框的样式，规则和boder一样，只不过它只对一个边生效

                 *

                 */

                border: 10px solid yellow ;

                border-right: none;

            }

        </style>

    </head>

    <body>

        <div class="box"></div>

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-边框简写属性的更多相关文章

  1. HTML&CSS基础-标签的属性

    HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...

  2. CSS基础-行快属性，hover

    CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性.     块标签         div,ul,li,ol,h1~h6,p         可 ...

  3. CSS基础 盒子相关属性总结 padding+border

    1.border当个属性: 作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style solid实线.dashed虚线.dotted点线 边框颜色 bo ...

  4. css基础知识之属性选择器

    css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  6. CSS基础（float属性与清除浮动）

    3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left  |  right  |  none 特点: 浮动的元素不占位置,脱离了标准文档流 ...

  7. CSS基础之浮动属性float图文详解

      宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”.   标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...

  8. CSS基础-边框

    border border-top设置上边界 border-bottom / border-left / border-right 同理 可以为每一条边设置 : border-top-width宽度 ...

  9. CSS基础 阴影相关属性设置

    一.字体阴影属性名:text-shadow:水平偏移量 垂直偏移量 模糊度 阴影颜色: html代码: <div>农夫山泉有点甜</div>css代码: div{ font-s ...

随机推荐

  1. Qt编写气体安全管理系统29-跨平台

    一.前言 Qt的跨平台特性是非常厉害的,本来作为C++来说,跨平台的特性比JAVA还要好,只不过学习难度更大,所以大家更理解的跨平台是JAVA,Qt的跨平台特性是我见过的所有开发环境和语言中最厉害的, ...

  2. python脚本容器化

    https://blog.csdn.net/zstack_org/article/details/53099919 如何选择 base image: https://blog.csdn.net/nkl ...

  3. PCL

    PCL(PointCloudLibrary)——是一个的模块化的现代C++模板库. 其基于以下第三方库:Boost.Eigen.FLANN.VTK.CUDA.OpenNI.Qhull,实现点云相关的获 ...

  4. 【视频开发】 十全大补:CxImage图像处理类库

     十全大补:CxImage图像处理类库 转载IT168        CxImage是一个可以用于MFC 的C++图像处理类库类,它可以打开,保存,显示,转换各种常见格式的图像文件,比如BMP, JP ...

  5. 【视频开发】GPU编解码:GPU硬解码---DXVA

    GPU编解码:GPU硬解码---DXVA 一.DXVA介绍 DXVA是微软公司专门定制的视频加速规范,是一种接口规范.DXVA规范制定硬件加速解码可分四级:VLD,控制BitStream;IDCT,反 ...

  6. redis主从分节

    概述 在现有企业中80%公司大部分使用的是redis单机服务,在实际的场景当中单一节点的redis容易面临风险. 面临问题 机器故障.我们部署到一台 Redis 服务器,当发生机器故障时,需要迁移到另 ...

  7. SpringBoot系列教程web篇之Freemaker环境搭建

    现在的开发现状比较流行前后端分离,使用springboot搭建一个提供rest接口的后端服务特别简单,引入spring-boot-starter-web依赖即可.那么在不分离的场景下,比如要开发一个后 ...

  8. [UOJ #140]【UER #4】被粉碎的数字

    题目大意:定义$f(x)$为数字$x$每一位数字的和,求$\sum\limits_{i=1}^R[f(x)=f(kx)]$.$R\leqslant10^{18},k\leqslant10^3$ 题解: ...

  9. [洛谷P5323][BJOI2019]光线

    题目大意:有$n$层玻璃,每层玻璃会让$a\%$的光通过,并把$b\%$的光反射.有一束光从左向右射过,问多少的光可以透过这$n$层玻璃 题解:事实上会发现,可以把连续的几层玻璃合成一层玻璃,但是要注 ...

  10. pytorch 0.4.0迁移指南

    总说 由于pytorch 0.4版本更新实在太大了, 以前版本的代码必须有一定程度的更新. 主要的更新在于 Variable和Tensor的合并., 当然还有Windows的支持, 其他一些就是支持s ...