Css新增内容
css3新增属性
可节省设计时间的属性
border-color:控制边框的颜色,并且有更大的灵活性,可以产生渐变效果
border-image:控制边框图像
border-radius:能产生类似圆角矩形的效果
text-shadow:文字投影
box-shadow:元素盒子投影
multiple backgrounds:多重背景图像,可以让一个元素有多个背景图像
例:
定义了三个背景图,下面分别对应背景图的位置
background-image:url(0.1png),url(0.2png),url(0.3png);
background-position:left top;-400px bottom;-800px top;
border-radius:20px;/*css3中的圆角矩形*/
-moz-border-radius:20px;/*Mozilla中的圆角矩形*/
-webkit-border-radius:20px;/*Safari中的圆角矩形*/
-webkit-box-shadow:3px 5px 10px #333;/*Safari中的盒子阴影*/
新增属性
一、颜色的表示方法:
1、十六进制 000 fff ff0000 00ff00 0000ff
2、英文单词
3、rgba(red(0-255),green(0-255),blue(0-255),alpha(0-1)
颜色的值越大,则越亮,透明的值越大,越不透明
4、hsla(色调(0-360), 饱和度(0%-100%), 亮度(0%-100%), 透明度(0-1)) background: rgba(255, 0, 0, 0.4);
background: hsla(200, 0%, 50%, 0);
opacity: 0;
二、transparent 控制透明度(这个可以实现三角形)
rgba() 来控制透明度
transparent 不可调节透明度,始终完全透明
opacity:数字 背景跟字体都会生效
div {
width: 0;
/* border-top: red solid 5px;
border-left: transparent solid 5px;
border-bottom: transparent solid 5px;
border-right: transparent solid 5px; */
border: 16px solid red;
border-color: transparent red transparent transparent;
}
三、盒子模型box-sizing
表示你设置的宽高从什么位置去设置
1、border-box:对象的实际宽度就等于设置的width值,即使定义有border和padding
2、content-border:对象的实际宽度等于设置的width值和border、padding之和
四、边框的属性
<1>边框圆角 border-radius:左上角 右上角 右下角 左下角
border-radius:属性值1(左上角,右下角)
属性值2(右上角 左下角);
border-radius:属性值1(左上角) 属性值2(右上角,左下角) 属性3(右下角)
/* border-radius: 10px 20px 30px 40px/40px 30px 20px 10px; */
/* border-radius:属性值1/属性值2 属性值1代表上下,属性值2代表左右*/
border-radius: 100px/80px
半圆
div {
width: 300px;
height: 150px;
background: red;
border-radius: 150px 150px 0 0;
<2>边框阴影
box-shadow: 水平距离 垂直距离 模糊距离 阴影尺寸 颜色 inset(内阴影);
box-shadow: -5px -5px 10px 3px #ccc, 5px 5px 10px 3px #ccc inset;
<3>边框图片
div {
width: 200px;
height: 200px;
border: 20px solid;(可加可不加颜色)
border-image-source: url(../images/border.png);(边框图片路径)
/* border-image-slice: value; 没有单位的数值*/(图片边框向内偏移)
border-image-slice: 27;
/* border-image-repeat 是否平铺取值:repeat 平铺不拉伸 round 平铺又拉伸 stretched 拉伸不平铺 */
border-image-repeat: round;
}
五、文本属性
1)文本阴影
text-shadow : 2px(水平,可为负数) 3px(垂直,可为负数) 2px(模糊距离,不能为负数) red;
2)文本描边
-webkit-text-stroke:宽度 颜色;一定要加上-webkit-前缀
3)溢出省略
text-overflow:ellipsis(省略号);
overflow:hidden;
white-space:nowrap;/*单行文本超出*/
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/*超出3行*/
overflow: hidden;/*多行文本超出*/
4)文本排版 dirction
ltr(left to right 从左到右)
rtl(right to left 从右到左),
一定要配合 unicode-bidi: bidi-override; */
direction: rtl;
unicode-bidi: bidi-override;
六、背景属性(默认情况下,背景颜色是从padding开始排放)
1)background-origin:属性
规定background-position属性相对于什么位置来定定位。(对背景图才有用) background-origin:content-box(从内容开始)/padding-box(从padding开始)/border-box(从边框开始);
2)background-size:改变背景图片的大小
属性值有:auto(图片原来的值,默认值)
number(200px)可能让图片变形
percentage:value% value%(根据盒子的宽高来定
cover(图片没有盒子大时,设置cover可使图片完全覆盖盒子,但是图片不能完全显示.一般配合background-position:center;去使用
contain(包含,可能会出现空白区域)
3)backgroun-clip设置背景显示在哪些区域取值:
border-box:显示content,padding、border区域。
padding-box:显示在padding、content区域content-box:显示在content区域
七、css3渐变(了解)
1)线性渐变(默认方向从上往下)
background:linear-gradient(direction,color1,color2,...)
direction取值:
to left(从右往左)
to right(从左到右)
to top (从下往上)
to bottom(从上往下,默认值)
to left bottom (左下角)
to left top(左上角)
to right top(右上角)
to right bottom(右下角)
角度:
单位为deg
当为0deg,得到一个从下往上
90deg,得到一个从左往右
180deg,得到一个从上往下的渐变
-90deg,得到一个从右往左
2)径向渐变(一点向四周渐变)
background:-webkit-radial-gradient(center,shape,size,startcolor,...lastcolor)
center 渐变起点的位置,可以是百分比(注意要设两个值)
shape 渐变形状 ellipse表示椭圆(默认),circle表示圆形
size 渐变的大小,即到哪里为止。closest-side 最近边
farthest-side 最远边 closest-corner 最近角 farthest-corner最远角
3)重复渐变
background:repeating-linear-gradient(red,blue 20%,green 40%)
background:repeating-radial-gradient(red,blue 20%,green 40%)
八、自定义字体
引用
@font-face{
font-family:"叶根";
src:url(字体的路径);
}
相应的元素
div{
font-family:"叶根";
}
九、字体图标
引用
十、css过渡(重要)
transition:
取值:transition-property:all ,height ,width(检索或设置对象中参与过渡)
transition-duration:3s;快慢
transition-delay:1s;
transition-timing-function:
取值:ease;开始快,后面越来越慢。
ease-in;开始慢,后面越来越快
ease-out;减速运动
ease-in-out;先加速后减速
总写:transition: property duration delay timing-function;
transition: all 3s linear;
1.text-shadow 文本阴影
text-shadow: 10px -10px 0px rgba(255,0,0,0.6);
第一个参数是水平偏移量,正值就往右,负值就往左
第二个参数是垂直偏移量,正值就往下,负值往上
第三个参数模糊程度,值越大,字越模糊,值为0 就是清晰
第四个参数,阴影颜色
2.text-overflow 超出文本显示省略号
/*单行文本溢出,用省略号显示的语法*/
p{
overflow: hidden;/* 让超出边框的文本隐藏起来*/
text-overflow: ellipsis;/* 让超出边框边缘的的文本显示成...*/
white-space:nowrap;/*让多出边框的文本不换行,在同一行显示*/
}
3.颜色 rgba
用rgba的好处是当父元素设置透明的时候,子元素不会跟着一块变透明
div{
background: #f00;
opacity: 0.6;/* 如果这样设置透明度的话,div里面的子元素文字也会跟着透明*/
filter: alpha(opacity = 60);
}
如果用rgba设置透明度的话,子元素就不会跟着透明了
div{
background: rgba(255,0,0,0.6);
}
4.圆角效果
border-radius: 5px; border-radius: 50%; 就变成圆了
5.box-shadow 边框阴影,和文本阴影类似
box-shadow:3px 5px 10px #333;
第一个参数是水平偏移量,正值就往右,负值就往左
第二个参数是垂直偏移量,正值就往下,负值往上
第三个参数模糊程度,值越大,字越模糊,值为0 就是清晰
第四个参数 外延值,值越大,就越往外延伸
第五个参数,阴影颜色
6.background-origin背景原点
属性值有
border-box
padding-box
content-box
表示背景是从border、padding、content处开始的
7.background-size背景大小
默认俩参数,可以设置宽和高
属性值为cover的话呢,就是背景扩大到覆盖整个元素为止,可能会超出范围
属性值为contain的话呢,就是扩大到有一边挨着元素了为止,可能会有一块没覆盖上
8.background-clip背景裁切
属性值为border -box表示从border处裁切,保留border以内的
属性值为content-box 表示从content处裁切,保留content以内的
css浏览器的兼容问题
解决兼容的原则
1.尽量使用兼容的属性
2.使用CSS hack技术
使用CSS hack技术解决兼容问题:
1.!important关键字
在同一个选择器中,定义了两条相冲突的规则,IE6不认!important,而Firefox/IE7+定义了以important的为准
2.在属性前添加“+”“——”号兼容不同浏览器
在属性前添加“+”(加号)可区别ie与其它浏览器,添加“——”(下划线)可区别IE6和IE7,IE7不支持“——”
3.使用子选择器和属性选择器等IE6不支持的选择器
html body{background-image:(bg.gif)}/*IE6有效*/
html>body{background-image:(bg.png)}/*Firefox/IE7有效*/
4.使用IE条件注释
条件注释是IE特有的功能,能够使用IE浏览器对XHTML代码进行单独处理
4-1.<!--[if IE]>
此内容只有IE可见,其他浏览器会忽视掉
<![endif]-->
4-2.<!--[if IE6.0]>
此内容只有IE6可见
<![endif]-->
4-3.<!--[if !IE6.0]>
除了IE6.0之外的都可见
<![endif]-->
4-4.<!--[if lte/lt IE6]>
此内容IE6及其以下版本可见/IE6以下版本可见
<![endif]-->
4-5.<!--[if gte/gt IE7]>
此内容IE7及其以上版本可见/IE7以上版本可见
<![endif]-->
Css新增内容的更多相关文章
- AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码
AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码 添加Watch应用对象时新增内容介绍 Watch应用对象添加到创建的项目中后,会包含两个部分:Watch App 和 Wa ...
- Python开发【第十篇】:CSS --无内容点击-不进去(一)
Python开发[第十篇]:CSS --无内容点击-不进去(一)
- 使用CSS为内容设定特定的鼠标样式(cursor)介绍
相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...
- 从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Delphi XE5中的新增内容
Delphi XE5中的新增内容 Delphi XE5是所有Delphi开发人员的必须备升级,并且是来自Embarcadero的获奖的.多设备应用开发解决方案的最新版本.使用Delphi XE5的新特 ...
- css基础内容
css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- ES6新增内容总结
ES6新增内容有:1,模块化思想.2,关于变量let和const.3,解构赋值.4,字符串的扩展.5,函数的扩展.6,箭头函数.7,继承apply的用法 以下就是详解: 1:模块化思想 非模块化有命名 ...
- chattr和lsattr命令,不能被删除、改名、设定链接关系,同时不能写入或新增内容
chattr和lsattr命令详解 chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,如果Linux内核版本低于2.2,那么许多功能不能实现.同样-D检查压缩文件中的错误的功能, ...
随机推荐
- 以数之名:In Praise of APL 后记
原文:http://www.jsoftware.com/papers/perlis77.htm 标题:In Praise of APL: A Language for Lyrical Programm ...
- validation-api各注解的用法
入参用@Valid,要不下面实体类中的注解不生效 @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为True@DecimalMax(value) 被注解的 ...
- POJ - 2777——Count Color(懒标记线段树二进制)
Count Color Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 53639 Accepted: 16153 Des ...
- vue 特点
1.双向绑定 v-model 2.组件化 页面扩展 单文件组件 js css html 都在一个文件中 好处:前端组件化的突破性设计 scoped限制css的渲染,防止污染 lang 定义预处理器 ...
- Applet
Applet简介: 可以翻译为小应用程序,Java Applet就是用Java语言编写的这样的一些小应用程序,它们可以直接嵌入到网页中,并能够产生特殊的效果.包含Applet的网页被称为Java-po ...
- Python字符串与格式化的一点用法
#python的基本语法网上已经有很多详细的解释了,写在这里方便自己记忆一些 1.python于C语言不同的是,python没有字符的概念,所谓的字符就是长度为1的字符串,使用切片或者索引同样可以对字 ...
- jq解决a连接锚点平滑过渡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Linux安装软件、python开发环境
软件安装与卸载 更新Ubuntu软件下载地址 1. 寻找国内镜像源 所谓的镜像源:可以理解为提供下载软件的地方,比如Android手机上可以下载软件的91手机助手:iOS手机上可以下载软件的AppSt ...
- 预热ASP.NET MVC 的View
ASP.NET MVC 的View 预设是Load on Demand(按需加载),也就是说View 第一次要Render 的时候才会去载入跟编译,这个就会造成一个现象,即使Web 应用程式已经完成启 ...
- day04 list tuple
一. 上节课内容回顾 字符串 由', ", ''', """括起来的内容是字符串 字符:单一文字符号. 字符串: 把字符连成串(有顺序的) 索引和切片 s[st ...