专栏首页老雷PHP全栈开发css基础教程之边框背景

css基础教程之边框背景

一、border

1.border:<line-width> || <line-style> || <color>

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

.box{
    border:1px solid #eee;
  }

2.属性拆分

    border-width:1px
    border-style:solid;
    border-color:#eee;

3.方向拆分

border-top

border-right

border-bottom

border-left

二、边框圆角 border-radius

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

  .box{
    border:1px solid #eee;
    border-radius:5px;
    border-radius: 5px/10px;
  }

方向拆分

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

三、阴影 box-shadow

none:无阴影

<length>①:第 1 个长度值定义元素的阴影水平偏移值。正值,阴影出现在元素右侧;负值,则阴影出现在元素左侧

<length>②:第 2 个长度值定义元素的阴影垂直偏移值。正值,阴影出现在元素底部;负值,则阴影出现在元素顶部

<length>③:第 3 个长度值定义元素的阴影模糊值半径(如果提供了)。该值越大阴影边缘越模糊,若该值为0,阴影边缘不出现模糊。不允许负值

<length>④:第 4 个长度值定义元素的阴影外延值(如果提供了)。正值,阴影将向四面扩展;负值,则阴影向里收缩

<color>:定义元素阴影的颜色。如果该值未定义,阴影颜色将默认取当前最近的文本颜色

inset:定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影

  .box{
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
  }

四、背景 background

由于背景参数较多所以推荐大家使用拆分背景属性

1、background-image 指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”

    .box{
      background-image:url(bg.jpg);    
    }

2.background-position 指定背景图像在元素中出现的位置。

<percentage> 百分比

<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。

center 背景图像横向或纵向居中。

left 背景图像从元素左边开始出现。

right 背景图像从元素右边开始出现。

top 背景图像从元素顶部开始出现。

bottom 背景图像从元素底部开始出现。

    div{
      background-position: -68px -34px;
      background-position: center;
    }

background-size 指定背景图像尺寸。

<percentage> 百分比

<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。

auto 背景图像的真实大小。

cover 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    div{
       background-size:100px 140px;
       background-size:cover;
    }

background-repeat 指定背景图像如何填充。

repeat-x 背景图像在横向上平铺

repeat-y 背景图像在纵向上平铺

repeat 背景图像在横向和纵向平铺

no-repeat 背景图像不平铺

round 当背景图像不能以整数次平铺时,会根据情况缩放图像。(CSS3)

space 当背景图像不能以整数次平铺时,会用空白间隙填充在图像周围。(CSS3)

    div{
      background-repeat: no-repeat;
    }

background-attachment 定义滚动时背景图像相对于谁固定。

fixed 背景图像相对于视口(viewport)固定。

scroll 背景图像相对于元素固定,默认

    div{
      background-attachment: fixed;
    }

background-origin 指定背景图像从元素的哪个区域作为显示的原点。

border-box 从border区域(含border)开始显示背景图像。

padding-box 默认值,从padding区域(含padding)开始显示背景图像。

content-box 从content区域开始显示背景图像。

    div{
      background-origin:border-box;
    }

background-clip 指定背景图像向外裁剪的区域。

border-box 默认值从border区域(含border)开始向外裁剪背景。

padding-box 从padding区域(含padding)开始向外裁剪背景。

content-box 从content区域开始向外裁剪背景。

    div{
      background-clip:content-box;
    }

background-color 指定背景颜色

    div{
      background-color: #808080;
    }

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP运算符

    老雷PHP全栈开发
  • css基础教程之其他常用css知识

    <url> 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)

    老雷PHP全栈开发
  • 学习数据类型、变量和常量

    _REQUEST 默认情况下包含了 _GET,_POST和 _COOKIE 的数组。

    老雷PHP全栈开发
  • PHP非阻塞模式

    让PHP不再阻塞当PHP作为后端处理需要完成一些长时间处理,为了快速响应页面请求,不作结果返回判断的情况下,可以有如下措施:

    后端技术探索
  • 分布式爬虫scrapy+redis入门

    利用分布式爬虫scrapy+redis爬取伯乐在线网站,网站网址:http://blog.jobbole.com/all-posts/ 后文中详情写了整个工程...

    潇洒坤
  • Extension project - Component.js of standard application could not be loaded

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • Deep Retinex Decomposition for Low-Light Enhancement

    Retinex模型是微光图像增强的有效工具。假设观测图像可以分解为反射率和光照。大多数现有的基于retinx的方法都为这种高度病态分解精心设计了手工制作的约束条...

    于小勇
  • swupdate 之 readback handler

    使用 swupdate 作为 OTA 方案 ,有项目要求在写入数据到分区之后需要再次读出校验。

    zqb_all
  • 基于AI的超分辨技术在RTC领域的技术难点与挑战

    大家好,我是袁振,现在就职于网易云信,主要负责视频后处理算法的开发和研究。今天我将和大家分享AI驱动的超分辨技术应用现状,主要是结合我之前的研究方向,以及当前的...

    LiveVideoStack
  • 信息搜集阶段可快速getshell的一些方式

    2、各远程执行类漏洞,如,Struts2,iis,tomcat,proftp,elasticsearch...

    周俊辉

扫码关注云+社区

领取腾讯云代金券