美文网首页
Day02(css3边框,demo 聊天框)

Day02(css3边框,demo 聊天框)

作者: AnnQi | 来源:发表于2017-11-07 14:27 被阅读0次

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像素
也就是我们的负号只改变方向,不改变数值;
偏移可以设置负,模糊度不能设置负
偏移量和模糊度是相加计算,符号不影响计算结果

模糊度:就是指一个颜色渐变至透明的过程,就叫做模糊度

相关文章

  • Day02(css3边框,demo 聊天框)

    css3 边框 1.1边框圆角 border-radius 圆角在处理的时候,要有一个概念,要形成一个圆,圆心、长...

  • css3学习 第一天

    CSS3边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 ...

  • 边框

    用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。css3中现增...

  • CSS3 用户界面

    CSS3 用户界面在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 用户界面属性: ...

  • CSS3 用户界面

    CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。在本章中,您将了...

  • 知识点七

    1、实现一个下拉框(运用知识点float,position) 2、CSS3常用样式的讲解 2.1边框border-...

  • CSS3基础

    CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框在本章中,您将了解以下的边框属性: border-ra...

  • 关于CSS3 新特性

    一、CSS3 边框 在 css3 中新增的边框属性如下: 创建圆角边框 示例 在CSS2中添加圆角很棘手,我们不得...

  • 好程序员web前端培训分享CSS3 边框

    好程序员web前端培训分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 ...

  • 常用css3相关api总结

    css3 边框 一、css3边框圆角效果 border-radius border-radius好可以是百分比或...

网友评论

      本文标题:Day02(css3边框,demo 聊天框)

      本文链接:https://www.haomeiwen.com/subject/hondmxtx.html