首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Css3新特性总结之边框与背景(一)

Css3新特性总结之边框与背景(一)

作者头像
sam dragon
发布2018-01-17 10:56:44
7480
发布2018-01-17 10:56:44
举报
文章被收录于专栏:cnblogscnblogs

本系列主要总结Css3一些新特性的认识,来源于《css揭秘》书。

一、半透明边框

  • css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);s:饱合度(0%~100%);l:亮度(0%~100%);a:透明度(0~1)
  • background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border);padding-box(背景颜色扩散到padding);content-box(背景颜色扩展到content)
  • 示例代码:
width:200px;
height:200px;
background: rebeccapurple;
border: 10px solid hsla(300, 0%, 50%, 0.5);     
background-clip: padding-box; //去掉和添加上此项可以看出效果

二、多重边框实现

  • box-shadow:设置或检索对象阴影,格式:box-shadow: none | <length>{2,4} && color? | inset?
    • length<1>: 水平偏移,可负值
    • length<2>: 垂直偏移,可负值
    • length< 3 >: 阴影模糊值,不可负值
    • length<4>:外延长度,可负值
    • <color>:阴影颜色
    • inset:表示为内阴影,为空表示外阴影
    • 可以设置多组效果,多组之间用逗号隔开(利用可box-shadow可重叠特性来设置多重边框,但边框样式不可做也条纹、虚线之类的)
    • 如果要设置检索文本阴影,用text-shadow属性
  • outline实现两个边框(只能实现两重边框,但边框样式灵活)

三、背景的定位

  • background-position:背景定位,值说明如下
    • center,left,top,bottom,right等都是表示背景从何地开始显示,如果设置重复平铺,会有不同的效果
    • 值可是数值或百分比:background-position: right 20px bottom 30px;
  • background-origin:背景图片的定位参数,三值context-box,padding-box,border-box等。
  • clac()计算宽度的函数
  • 示例代码如下:
background-image: url('../img/bck.png');
background-repeat: no-repeat;
background-size: 40px 40px;
width:200px;
height:200px;
margin-top:10px;
border: 5px solid red;
--background-position: right 0px bottom 0px;
background-origin: content-box;
background-position: calc(100% - 50px);
padding: 10px;

四、多重圆角边框

  • box-shadow:他的圆角是会跟随border-radius走的,而outline且不会。
  • 最小阴影(box-shadow)计算公式为:勾股定理,设置阴影时应该大于此值
  • 示例代码:
margin: 10px auto;
width: 10em;
height: 8em;
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #556;
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-11-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、半透明边框
  • 二、多重边框实现
  • 三、背景的定位
  • 四、多重圆角边框
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档