css3相关样式

1.渐变 1.1 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 background: linear-gradient(direction, color-stop1, color-stop2, ...); 1.2 径向渐变(Radial Gradients)- 由它们的中心定义 background: radial-gradient(center, shape size, start-color, ..., last-color); 2.转换 2.1 2D…

CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

CSS3媒体支持在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽度来进行,指定方法如下所示 <meta name="viewport" content="width=600px" /> CSS可以通过设置media来决定该样式所适用的设备,如screen.tv.print.speech.handheld.all等 <…

CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色 2. 使用服务器端字体文本换行: word-break:norma | keep-all | bread-all norma(使用浏览器默认的换行规则), keep-all(只能在半角空格或连字符处换行), bread-all(允许在单词内换行) 优先使用客户端字体 1 @font…

css盒子模型 css3盒子相关样式

1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left 左边距 padding-right 右边距 padding-top 上边距 2.边框 border-style 定义边框样式单边框样式 border-top-style border-left-style border-right-style borde…

CSS/CSS3常用样式小结

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…

[总结]CSS/CSS3常用样式与web移动端资源

CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…

css文字与文本相关样式

css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体的风格 font-variant 以小型大写字体或正常字体显示文本 font-weight 设置字体的粗细 css3文字相关样式 1.给文字添加阴影 <!--text-shadow:length length length color-…

css3-4 css3边框样式

css3-4 css3边框样式一.总结一句话总结: 二.css3边框样式 1.相关知识边框属性:1.border-width2.border-style3.border-color 边框方位:1.border-left:1px solid #f00;2.border-top:1px solid #f00;3.border-right:1px solid #f00;4.border-bottom:1px solid #f00; 2.代码 border边框方位实例 <!doctype html…

css3-3 css3背景样式

css3-3 css3背景样式一.总结一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:#ccc url('xs.png') no-repeat fixed 50% 50%;中的最后两个参数是什么意思? 背景图片的偏移位置,表示距上和距左各百分之五十 2.为什么各种网站设置的时候把所有的小图标集成在一张图上面? 降低服务器请求次数,降低负载,当然这样也会导致必须下载了这张图页面才能正常显…

web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中又恢复了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<…

炫酷的CSS3抖动样式:CSS Shake

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告.图像.按钮上,这样可以用来吸引用户眼球从而促使去点击它. 这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动.无限抖动.鼠标悬停拉动. CSS Shake 使用方法: 首先引入css shake的样式表文件.css3按钮:http://www.hui…

css3盒子相关样式

1.css3的display属性: inline:内联 inline-block:可以设置宽高的内联 block:设置为块: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3盒子类型</title> <style> /*inline:内联,inline-block:可以设置宽高的内联,…

css3中的布局相关样式

web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点,譬如如果两栏或多栏中元素的内容高度不一致则底部很难对齐.因此在css3中追加了一些新的布局方式. 这里主要介绍多栏布局与盒布局,到目前为止这两种布局方式受到了firefox.safari及chrome浏览器的支持. 一.多栏布局针对使用float属性或position属性出现的缺点,css3中使用…

CSS3系列三（与背景边框相关样式、变形处理、动画效果）

与背景相关的新增属性大家都知道在HTML页面中,元素都是由以下几部分组成使用background-clip来修改背景的显示范围,如果设定为border-box,则背景范围包含边框区域,如果设定为padding-box则不包含边框,包含padding区域.如果设定为content-box则背景只包含内容区域 background-origin属性:指定绘制背景图像的绘制起点,它的属性值跟background-clip是一样的,也就是说你可以通过它的指定绘制时从边框的左上角开始或者从内容的左上角…

[CSS3]学习笔记-文字与字体相关样式

1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ /*text-shadow: 5px 5px 5px red;*/ /*可指定多个阴影*/ text-shadow: 5px 5px 5px red, 15px 15px 5px red; color:black; fon…

CSS3 文字与字体相关样式

给文字添加阴影文字换行客户端文字 font-size-adjust属性给文字添加阴影-text-shadow属性 text-shadow:length length length color 前三个length分别指阴影离开文字横向距离.纵向距离(这两个参数允许值为负)和模糊半径(值越大模糊范围越大,默认为0,不模糊),color指定阴影的颜色 div { text-shadow:5px 5px 10px gray; } 让文本换行很多浏览器本身自带换行功能,在css3中可以使用word…

css3文字与字体的相关样式

给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length color: 其中前三个length表示阴影离开文字的横方向距离,纵方向距离,和阴影的模糊半径,阴影的颜色.前两个参数为阴影离开文字的距离可以为负值,负值代表向上,向左移动.颜色的参数不能省略,省略该参数则不会绘制阴影.指定多个阴影,并且对多个,阴影可以使用不同的颜色,指定多个阴影时使用逗号将多个阴影…

css3背景与边框相关样式

background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置图片的起始位置 background-repeat 设置背景图片是否及如何重复 css3新增的背景…

css3：与背景的相关样式

[CSS3] 学习笔记-背景与边框相关样式

1.与背景相关的新增属性包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ background-color: black; border:dashed…

CSS3水平翻转样式和background-size兼容问题

一.水平翻转和垂直翻转:第一种:随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy { -moz…

css的其他相关样式属性

一.颜色 1.预定义的表示颜色的单词 red,black.gray,pink...... 2.16进制表示 # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 如果两两一样可以合并成3个数字 #fff; 3.rgb rgb(,,)0-255的数 4.rgba rgba(,,,)前三个是0-255的数,最后一个是0-1的数有时候a不起作用,我们会用透明度来调节0是全透明1是不透明二.一些其他的相关属性 line-height:20px;//指定每行的高度…

一些上流的CSS3图片样式

直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器也会很好地渲染.Darcy Clarke和我做了一个简单的教程,讲解如何使用jQuery来动态地制作完美的圆角图片.今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果.我将向你展示如何使用box-shadow.border-radius 和 transitio…

css3常用样式集锦

控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; right:0; top:0; z-index:99; border-bottom:1px solid #eee; -webkit-transform-origin:0 0; transform-origin:0 0; -webkit-transform:scale(0.5, 0.5); transform:…

[CSS3] 学习笔记-CSS3盒子样式

1.盒子的类型在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inline类型. <head> <style> /*div默认是block类型,span默认是inline类型,以下通过display,将它们的类型反过来了*/ div{ background-color: red; display:inline; } span{ background-co…

css3的样式讲解-css学习之旅（3）

css背景属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:background-repeat:norepeat,repreat,laft,right 代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…

CSS3布局样式

CSS3多列布局columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现,语法: 参数描述: 例子: CSS3 列间距column-gap column-gap主要用来设置列与列之间的间距,其语法规则如下:…