css3的使用已经分布在各种网站上，其用途对于前端开发人员来说有很大的帮助，比如之前的圆角矩形，需要使用背景图片来完成，现在只需使用border-radius:5px;便可以做出圆角边框的效果，今天来记录下css3一些常用的属性。 盒子属性：边框圆角：radius,边框阴影：box-shadow 边框：border-radius:top-left top-right bottom-right bottom-left; 这里先赘述一下盒子边框样式设计的先后顺序 border-radius:10px; b...
CSS盒子模型(下) 一．CSS3可伸缩框（Flexible Box） 可伸缩框属性（Flexible Box）是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义...
主要是向 p 元素的四个角添加圆角边框：实例如下：<!DOCTYPE html> <html> <head> <style> p { border:2px solid; padding:10px; background:#dddddd; border-top-left-radius:1em; border-top-right-radius:1em; border-bottom-right-radius:1em; border-bottom-left-radius:1em; -webkit-border-top-left-radius:1em; /* Safari */ } </style> </head> <body><p>border-top-left-radius 属性允许您向左上角添加圆角边框。</p></...
定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxSizing="bord...
animation Value: [ || || || || || || ] [, [ || || || || || || ] ]* animation-timing-function： 定义动画的速度曲线 ease：动画以低速开始，然后加快，在结束前变慢。 linear：匀速 ease-in：动画以低速开始 ease-out：动画以低速结束 ease-in-out：动画以低速开始和结束，相对于ease缓慢，速度更均匀 step-start：按keyframes设置逐帧显示，第一帧为keyframes设置的第一帧。 step-end：按keyfram...
在css3中transform主要包括以下几种：rotate（旋转）、translate（移动）、scale（缩放）、skew（扭曲）以及matrix（矩阵变形）。 语法： transform ： none | <transform-function> [ <transform-function> ]* 也就是：transform: rotate | scale | skew | translate |matrix;none表示不进行变形，transform的这些属性可以叠加使用，叠加使用时用 空格隔开。 下面对每个属性一一介绍： rotate（旋转）： 通过指定的角度...
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。 语法： transition ： [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> [, [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]]* transition主要包含四个属性值： transition-property（变换的属性）， transition-duration（变换延续的时间...
在css3之前，要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里：http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐，但CSS3的到来简化了实现圆角的方式。 CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。 -webkit-border-radius-moz-border-radius-ms-border-radius-o-border-radius border-radius属性其实可以分为四个其他的属性...
RGBA 是 CSS3 中用来控制颜色的单位，分别是 Red Green Blue 三原色和 Alpha 透明度的缩写。 也就是说该属性可以帮助我们在设置颜色的同时，也设置了其透明度。 其实就是 RGB 属性和 opacity 属性的合并写法。 其中 RGB 三个值的设置可以为百分比或者 0~255 的整数值。 A 的值则是 0~1 ，和 opacity 属性一致。 一、应用在背景中： .reg-bgc{ background: rgb(255, 0, 0);}.apl-bgc{ background: rgba(255, 0, 0...
CSS3中的animation与HTML5中的Canvas绘制动画又不同，animation只应用在页面上已存在的DOM元素上。 运用animation能创建自己想要的一些动画效果，但是有点粗糙。 了解animation之前得知道"Keyframes",我们把他叫做“关键帧”。 Keyframes具有其自己的语法规则，它的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"...
发现animation这个新属性很有趣，在此学习，并整理下！ 浏览器支持： Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性； Safari 和 Chrome 支持替代的 -webkit-animation 属性。 定义和用法 animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direct...
1 /*对元素进行改变（移动、变形、伸缩、扭曲）*/ 2 .wrapper{ 3 margin:100px 100px auto auto; 4 width:300px; 5 height:200px; 6 border:2px dotted blue; 7 } 8 .wrapper div{ 9 width:300px;10 height:200px;11 background:red;12 color:blue;/*设置文本颜色 如果有的话*/13 text-align:center;/* 设置文本位置 如果子元素有的话 */14 line-height:200px;/* 设置行间距 */15 bor...
最近学习CSS3， 以下CSS文件中的内容来自CSS手册。 可直接调用此CSS查看效果。 若有遗漏，待发现后补充进去。 @charset "utf-8";/* -------------------------此文档收集并介绍CSS3新增属性------------------------/*----------border-color---------设置对象边框的颜色。---------------------浏览器支持：Firefox3.0+---------------------取值：：颜色值。*/.border-color{ border: 8px solid #...
首先，说一下clip-path属性，以前我也没有见过这个clip-path属性，网上搜了一下，原来clip-path是‘剪切’的意思。clip-path:polygon(x,y)属性，polygon(x,y)内的x表示横坐标的位置（px %）,y表示纵坐标的位置（px %）。说到底，这个clip-path剪切好比photoshop一样，可以替代photoshop剪切图片,只不过，代码和ps的区别在于代码要手动找路径，ps可以直接用魔术棒。这是我刚刚用clip-path剪切的图片： 其实，svg也能制作路径图...
当你看到这样的效果图是不是已经崩溃了 css3没出来之前大部分人基本都是用图片的方式拼出来的 腾讯邮箱就是这么做的 然后你想和设计说换直角吧。我用图片的好烦的感觉！而且我们还要兼容到ie6 她和你说别人能做到你为啥不能 然后本人只能用曾经被遗忘的一个小插件完成了这个奇怪的东西 PIE http://css3pie.com/documentation/pie-js/ 有了pie.js，做效果再也不用考虑浏览器了（当然这句水分比较足，和金坷垃一样...