【CSS3背景相关样式】的更多相关文章

CSS3背景相关样式

background-image绘制多张图片叠加,示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-image绘制多张图片叠加</title> <style> div{ width:1100px; height:800px; background-image:…

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条件来判断是否如解析普通的页面内容一样解析条件注释…

炫酷的CSS3抖动样式:CSS Shake

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

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.为什么各种网站设置的时候把所有的小图标集成在一张图上面? 降低服务器请求次数,降低负载,当然这样也会导致必须下载了这张图页面才能正常显…

CSS3学习系列之背景相关样式（一）

新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background-break:指定内联元素的背景图像进行平铺时的循环方式 background-clip属性 在HTML页面中,一个具有背景的元素通常由元素的内容.内容补白(padding).边框.外部补白(margin)构成. 元素背景的显示范围在css2与css2.1.css3中的并不相同,在css2中,背景的…

CSS3学习系列之背景相关样式（二）

在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处理方式并不一致,在chrome浏览器与safari浏览器中,会绘制出一个椭圆形边框,第一个半径为椭圆的水平方向半径,第二个半径为椭圆的垂直方向半径,在firefox浏览器与opera浏览器中,将第一个半径作为边框左上角与右下角的园半径来绘制,将第二个半径作为边框右上角与左下角的园半径来绘制.例子如下…

一些上流的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水平翻转样式和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…

CSS3布局样式

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

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中样式计算属性calc()的使用和总结

calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc来设置动态值.calc支持的运算单位有rem , em , %, px,calc是支持单位的混合使用的,其计算优先级别和数学一致. calc的用法 .elm{ width:calc(expression); } 其中,expression是一个用来计算长度的表达式,支持“+”,“-”,“*”,“/”…

css3滚动条样式美化

关于滚动条的设计,需要用到css3的微元素,都列在下边吧(以Chrome内核webkit为例). -webkit-scrollbar     滚动条的整体轮廓,width表示纵向滚动条的宽度,height表示横向滚动条的高度. -webkit-scrollbar-track     滚动轨迹 -webkit-scrollbar-thumb   滚动滑块 -webkit-scrollbar-corner   滚动条右下角的小正方形 做个例子参考一下: 1 <!DOCTYPE html> 2 &l…

CSS3中样式顺序

.box{ /*1*/ background: yellow; /*2*/ background: radial-gradient(ellise, yellow, red); } 就以上样式1和2的顺序是不能修改的. 1:是给低能的浏览器用的,当然高能的也能够识别: 2:是给高能的浏览器用的. 如果用户用的是低能浏览器,只有1生效: 如果用户用的是高能浏览器,2则生效. 简直就是帅得掉渣啊! .another_box { /*1*/ -webkit-border-radius: 5px; /*这…

【CSS3】---样式小技巧

水平居中设置-定宽块状元素 当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素.这一小节我们先来讲一讲定宽块状元素. 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的.我们来看个例子就是设置 div 这个块状元素水平居中: html代码: <body> <div>我是定宽块状元素,哈哈,我要水平居中显示.</div> </body> css代码…

css3特效样式库

直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} .a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-…

css3新增样式介绍

在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3前缀使用介绍,我们直接看个例子: -webkit-transform:rotate(-3deg); // 给Chrome和Safari等webkit内核的浏览器使用 -moz-transform:rotate(-3deg);    // 给Firefox浏览器使用 -ms-transform:rot…

css3公共样式

温馨提示:一下css封装,建议按需使用,否则会造成很大的代码冗余,且很多样式会造成不符合预期的效果,建议合理使用 <a href="https://meyerweb.com/eric/tools/css/reset/">Reset.css</a> function.css /* 禁止选中文本 */ .usn{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-use…

css3表格样式

<caption>  关于表格存储内容的描述或总结. 1.border-spacing:0;border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式). 2.border-collapse:collapse;border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示. 3.<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容. CSS3里面加入了一个“-webkit-font-…

css3/sass 样式记录

css3 width: calc(50% - 10px) sass 1.奇偶行 .classNameA { background:red; &:nth-child(even) { background:green; }}…

前端开发CSS3——文本样式和盒子及样式

博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome:     http://fontawesome.dashgame.com/   |       iconfont:      http://www.iconfont.cn/ 文本样式 1.字体样式 color 为字体指定颜色 ,取值如下: 颜色的英文单词:white.RGB值rgb(255,255,255).RGBA值rgba(255…

CSS3背景相关新增属性

background-clip border-box:充满边框和内边距,内容. padding-box:充满内边距,内容 content-box:只充满内容 background-origin border-box:在边框开始绘制 padding-box:在内边距开始绘制 content-box:只在内容里开始绘制 border-image border-image:url("01.png") 50 50 50 60; 对话框的形状 数字为九宫格,拉伸部位只有区域5…

css3新样式

超出两行变省略号 overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;…

css3常用样式

.box{ //改变轴的方向 flex-direction:column; //两端对齐 justify-content:space-between; //换行 flex-wrap: wrap; //在轴上如何对齐 //center:居中, //flex-start:在主轴上由左或者上开始排列 //flex-end:在主轴上由右或者下开始排列 //space-around:每个项目两侧的间隔相等 align-items: center; }…

CSS3文本样式

目录 文本阴影 text-shadow 文本轮廓 text-outline 文本换行 word-break normal break-all keep-all word-wrap 新文本属性 text-align-last text-overflow 文本属性溢出 文本阴影 text-shadow 应用于阴影文本 语法: text-shadow: h-shadow v-shadow blur color h-shadow 水平偏移 v-shadow 竖直偏移 blur 模糊距离,模糊是向外的,不…

如何处理CSS3属性前缀

今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin. 姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性.也这样让我在思考,那么有了 Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不…