css3属性中background-clip与background-origin的用法释疑

【css3属性中background-clip与background-origin的用法释疑】的更多相关文章

css3属性中background-clip与background-origin的用法释疑

困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种,而且这两个属性表示的都是元素背景与元素边框.补白(padding)和内容区域之间的某种关系. 比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要是透明的,不然它会覆盖住背景) 这里为了既体现出边框,又体现出边框中的背景,我特意使用了虚线的边框.(…

今天我们来讨论一下CSS3属性中的transition属性；

transition属性是CSS3属性:顾名思义英文为过渡的意思:主要有四个值与其一一对应:分别是property(CSS属性名称),duration过渡的时长,timimg-function转速曲线函数(其对应着多个已经设置好的值如:ease,ease-in-out 等),delay延时单位为毫秒(延迟多少秒开始过渡): 首先我们写个简单的div: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q…

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box-shadow.transform等.它们有良好的文档.极佳的测试效果并且经常用到,将成为你设计网站的得力助手.学习CSS3的属性就要先从主流的属性开始,其他属性则可通过CSS3手册获得帮助.具体实例展示,读者可以在下一章大量学习.本节主要学习CSS3属性的用法及兼容性. 1 使用CSS3属性前的准…

css3-background clip 和background origin

1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,padding-box,content-box从边框,还是内边距(默认值),或者是内容区域开始显示. 代码演示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>…

html5常用属性text-shadow、vertical-align、background如何使用

html5常用属性text-shadow.vertical-align.background如何使用一.总结一句话总结: 1.text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)] 2.vertical-align注意语义, 注意父元素的基线 3.background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 4.background: transparent…

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的贝塞尔曲线.但是这些动画效果都是连续性的. 今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符,可以让动画不连续,就是制作逐帧动画. steps(n,start/end) 第一个参数 number 为把动画分为 n 步阶段性展示,表示把…

Django中CSS加载background url('')问题

Django中CSS加载background url('')问题在django中, 默认CSS中如果有 background url('images/a.jpg') 这类的属性,会被django当成URL来解析这样会造成找不到该文件的问题. 所以为了解决这个问题,首先需要配置setting.py, 配置STATICFILES_DIRS STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) 然后把需要引用的文件放入static…

CSS3 属性组参考资料

CSS 属性组: 动画背景边框和轮廓盒(框) 颜色内容分页媒体定位可伸缩框字体生成内容网格超链接行框列表外边距 Marquee 多列内边距分页媒体定位打印 Ruby 语音表格文本 2D/3D 转换过渡用户界面 "CSS" 列指示该属性是在哪个 CSS 版本(CSS1.CSS2 或 CSS3)中定义的. CSS3 动画属性(Animation) 属性描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,…

常用CSS3属性整理

常用CSS3属性整理文本文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 normal 默认 break-word 内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height.width或display:block或position:absolute. word-break: 处理单词折断 normal 使用浏览器默认的换行规则. break-all 允许在单…

实用的CSS3属性和使用技巧

CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技巧,希望能够为你的开发.设计工作带来一些帮助. 1. 圆角效果如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用.HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现.“border-radius”是实现这一功能的一个重要的属性,可以用来直接…

移动端几个css3属性的练习

转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heighlight-color:rgba();改变safari 与大部分android机可点击元素,点击时产生的半透明灰色背景在ios safari 与大部分android机中有效,alpha设置为0时,去掉背景色: 点击是默认状态: 2: ::selection选择器 w3c school中说明:…

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. CSS3属性选择器下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配方法. […

IE6/7/8如何兼容CSS3属性

最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc.个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性: 1.border-radius圆角 CSS代码如下: .pie_radius{ width:250px;height:250px; …

让IE6IE7IE8支持CSS3属性的8种方法介绍

我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName…

如何让IE 低版本下支持 css3属性

依赖源该文件为 ie-css3.htc (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码通过源码我们可以看到该文件在一定程度上类似于我们所使用的javascrip --Do not remove this if you are using-- Original Author: Remiz Rahnas Original Author URL: http://www.htmlremix.com Published date:…

小tip:巧用CSS3属性作为CSS hack——张鑫旭

一.开篇小问题题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是大家全神贯注思考的18分钟 ———————— ……思考结束三.问题引导针对不同浏览器实现类似的效果,我们可能都会想到CSS hack这个东西,让不同的浏览器下引用不同的CSS属性或是不同的CSS属性值. 于是要实现上图所示的效果,我们可能会将CSS代码分成两块,一块针对IE6~8,另外一块针对I…

让IE6/IE7/IE8支持CSS3属性的8种方法介绍

我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName…

理解CSS3属性transition

一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-duration:规定完成过渡效果需要多少秒或毫秒. transition-timing-function:规定速度效果的速度曲线. transition-delay:定义过渡效果何时开始. 1.2 语法 transition: property duration timing-function del…

PIE使IE浏览器支持CSS3属性（圆角、阴影、渐变）

http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-12-14 love朱朱文章来源阅 9569 转 19 转藏到我的图书馆微信分享: 一.PIE之简述在国外,CSS3的盛行与普及,探讨与研究要比国内领先不知多少个身位.相比之下,国内似乎如一潭死水,为何?我觉得国内领先的前端团队应该通过自身的影响力,带动国内整个前端领域与时俱进…

如何处理CSS3属性前缀（转载）总结

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

IT兄弟连 HTML5教程 CSS3属性特效动画-animation

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通过CSS3,我们能够创建动画,可以在许多网页中取代动画图片.flash动画以及JavaScript. 1 关键帧keyframes 如需在CSS3中创建动画,我们需要先学习@keyframes规则.前面所提到transition制作的过渡效果,包括了初始属性和最终属性,一个开始执行动作时间和一个延…

IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景

CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.background-origin.background-size,这三个属性描述如表1: 表1 CSS3新增背景属性 1 多背景 CSS3允许设置多个背景图片,每个背景用逗号隔开,每个背景图片占一层,层的上下显示按照在CSS中写的顺序来定,最先写的背景在最上层. 多背景的格式如下: background: ur…

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2

3 背景属性在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器设置多张背景图片,也就是说可以把不同的背景图片放到一个块元素中.多张背景图片的URL之间使用逗号隔开即可.如果有多张背景图片,而其他属性只有一个,那么所有背景图片都应用该属性值.代码如下所示: 背景图片大小调整也是CSS3提供的一个新特性,它使得开发人员可以随心所欲地控制背景图片的尺寸大小.在CSS…

CSS-基本语法/引用/文本设置/选择器/css3属性

CSS-基本语法/引用/文本设置 css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值.代码示例: div{ width:100px; height:100px; color:red } css页面引入方法: 1.外联式:通过link标签,链接到外部样式表到页面中. <link rel="stylesheet" type="…

CSS3属性(二)

<html> <head> <title>css2</title> <style type="text/css"> div{ width: 200px; height:200px; font-size: 65px; } /* 1.translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 */ .translate{ background: red; transform: translate(50p…

IE6-8支持css3属性

方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><…

【css】css3属性

1. 无需区分webkit moz等前缀的css3属性 text-shadow background 2. 需要区分前缀的css属性 border-radius box-shadow text-stroke background-size text-overflow box-flex transition resize…

如何用javascript获取和设置css3属性

==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); console.log(test.style); 然而这种方法并没有什么效果,因为style代表的是行间样式. 我突然想起以前学JS运动,有一个叫做getStyle的方法 function getStyle(obj, name){ if(obj.currentStyle){ return obj.cu…

CSS3 页面中展示邮箱列表点击弹出发送邮件界面

CSS3 页面中展示邮箱列表点击弹出发送邮件界面代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS教程</title> <style> ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; d…

css3 属性 text-overflow 实现截取多余文字内容以省略号来代替多余内容

css3 属性 text-overflow: ellipsis 前言正文结束语前言我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果: 做到这样的效果,我们需要运用两个特殊的样式来实现 text-overflow 和 white-space 正文让我们分别来看一下使用了这些样式,和不使用这些样式的区别吧 html内容 <div class="box"> <span>我是一段测试文…