ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css3(一)

2020-08-19 22:32:47  阅读:178  来源: 互联网

标签:css3 box 指定 边框 宽度 按钮 属性


1、CSS3简介

  如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性,弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷动画圆角阴影边框图片…

2、CSS3现状

  1、浏览器支持程度差,需要添加私有前缀

    -webkit- :谷歌、Safari

    -moz- :火狐

    -ms- :IE

    -o- :欧朋

  2、移动端支持优于PC端

  3、不断改进中

  4、应用相对广泛

知识点er:CSS3颜色

1、RGB

  RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。

  000:黑色 255 255 255:白色

2、RGBA

  RGBA颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数

3、十六进制颜色

  指定一个十六进制的颜色其组成部分是:#f f f f f f。所有值必须介于0和FF之间。

  #ff0000表示红色   #00ff00表示绿色  #0000ff表示蓝色   

4、HSL

  HSL指定:HSL(色调(0-360,0代表红色,120代表绿色,240代表蓝色),饱和度(0-100%),亮度(0-100%))

5、HSLA

  HSL指定:HSL(色调(0-360,0代表红色,120代表绿色,240代表蓝色),饱和度(0-100%),亮度(0-100%),alpha(0-1))

知识点三:文本效果

1、文本阴影

  text-shadow: 5px  5px  5px  #FF0000;

  text-shadow:水平阴影  垂直阴影  模糊的距离  阴影的颜色

2、文本溢出

  white-space: nowrap; 

  overflow: hidden;

  text-overflow: ellipsis;

知识点四:CSS3边框

1、圆角

  border-radius:  左上   右上  右下   右上 ;

2、盒子阴影

  box-shadow:水平阴影  垂直阴影  模糊的距离  阴影的颜色

3、边界图片

  border-image:url()  30  30  round:平铺(strech:拉伸);

知识点五:CSS3框

1、box-sizing属性:不管margin    自适应 包含边框和 内边距

  box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

  box-sizing: content-box|border-box|inherit

说明

content-box

这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box

指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

指定 box-sizing 属性的值,应该从父元素继承

2、调整尺寸

  resize属性指定一个元素是否应该由用户去调整大小,搭配overflow:hidden;使用

  resize:  both(vertical:垂直方向 horizontal:水平方向);

知识点六:CSS3按钮

1、按钮颜色

  使用 background-color 属性来设置按钮颜色

2、按钮大小

  使用 font-size属性来设置按钮大小

3、圆角按钮

  使用 border-radius 属性来设置圆角按钮

4、按钮边框颜色

  使用 border 属性设置按钮边框颜色

5、鼠标悬停按钮

  使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

6、按钮阴影

  使用 box-shadow 属性来为按钮添加阴影

7、按钮禁用

   使用cursor 属性并设置为 "not-allowed" 来设置按钮禁用

8、按钮宽度

  使用 width 属性来设置按钮的宽度, 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。

标签:css3,box,指定,边框,宽度,按钮,属性
来源: https://www.cnblogs.com/guirong/p/13532333.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有