Day02(css3边框,demo 聊天框)

css3 边框

1.1边框圆角

border-radius

圆角在处理的时候,要有一个概念,要形成一个圆,圆心、长半径、短半径的一个概念,正圆其实是椭圆的一种特殊情况;

在我们设置的时候,可以分别设置长半径,短半径,用“/”分割,遵循1,2,3,4,的四个角的规则
当圆角半径小于或等于边框宽度的时候,元素内角为直角

1.2边框图片
image.png

我们给边框设置背景图片,会被切割成九宫格的形式,然后设置
通过我们的背景切割,把背景图切割下来,放在我们的边框上面

1.3边框阴影
box-shadow:水平偏移,垂直偏移,模糊度,颜色

偏移量可以加上符号,但是符号仅仅只是改变方向,不改变数值;
例如:boxshadow:10px 0 0 0 ;水平往右偏移10像素
但是,加上负号:box-shadow:-10px 0 0 0 ;水平往左偏移10像素
也就是我们的负号只改变方向,不改变数值;
偏移可以设置负,模糊度不能设置负
偏移量和模糊度是相加计算,符号不影响计算结果

模糊度:就是指一个颜色渐变至透明的过程,就叫做模糊度
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,574评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,881评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,857评论 0 11
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 12,966评论 22 225
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 6,734评论 0 1

友情链接更多精彩内容