3.4 CSS3圆角边框属性在web页面上圆角效果很常见。圆角给页面增添曲线之美，让页面不那么生硬，但是为了设计圆角效果。3.4.1 broder-radius 属性的语法及参数语法：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]? border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、...
第17章 与背景和边框相关的样式与背景相关的新增属性background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定背景中图像的尺寸 background-break指定内联元素的背景图像进行平铺时的循环方式 在Firefox浏览器需要加“-moz-” Safari浏览器需要加“-webkit-”background-clip的值有border（背景范围包括边框区域）和padding（背景范围包括padding区域，不包括边框）“-webkit-”...
CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值。不过在我们与这几个新属性亲密接触之前需要知道3个重要的盒子。 三个盒子 假设现在有个容器，容器里面有些内容，虽然我们看不见，但是这些内容的外面是有一个盒子的，这个盒子...
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>慕课七夕主题</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style type="text/css">* {padding: 0;margin: 0;}ul,li {list-style-type: none;}#content {width: 100%;height: 100%;/* top: 20%;left: 20%; */overflow: hidden;position: absolute;}.content-wrap {position: rela...
CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明: transform 从字面来看transform的释义为改变，使…变形；转换 。这里我们就可以理解为变形。那都能怎么变呢？none 表示不进行变换；rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。skew 扭曲 tra...
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0; padding: 0;}.clearfix{zoom:1;/*为IE6，7的兼容性设置*/}.clearfix:after {content: ‘.‘;display: block;height: 0;clear: both;visibility: hidden;}ul li {list-style: none;float: left;margin: 50...
整理了10个纯CSS3制作的面包屑导航，这些都是通过CSS3来编写，十分方便，而且实用。有些文章附有教程，大家可以研究学习一下。漂亮面包屑导航查看网站扁平化面包屑导航查看网站圆形风格面包屑导航查看网站CSS面包屑导航查看网站CSS3面包屑导航制作教程查看网站黄色的CSS Breadcrumbs教程查看网站CSS3 Breadcrumbs查看网站扁平化风格面包屑制作教程查看网站CSS 面包屑菜单制作方法查看网站五个不同风格的面包屑导航CSS制作教程查看网...
今天为大家介绍一个非常炫酷的超链接特效。在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果。这些超链接特性，大都是借助伪元素、svg、HTML5动画来实现的。效果都很漂亮，不信看下面。用你的鼠标悬停在这些链接上，你就能体验和传统链接完全不一样的感觉。当然最重要的一点：你需要使用现代浏览器才能有更好的体验效果，比如谷歌浏览器或火狐浏览器。演示效果和下载请看：http://yusi123.com/3236.html1. [代码]节选其中...
当下各种手机，平板尺寸不一，如果盒模型只能固定尺寸，不能随意压缩，将不能很好的迎合这个时代。所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model)。 弹性盒模型可以水平布局，可以垂直布局，还可以调换顺序，可以设置不等的百分比等。1.弹性盒子column分栏 1<h2>1.弹性盒子column分栏</h2> 2<div class="freebox"> 3<img src="image/moon.jpg" alt="天宫二号"/> 9月15日晚10点04分，八月十五中秋节夜晚，甘肃酒...
CSS3之position1、取值（1）absolute（2）fixed（3）inherit（4）relative（5）static（6）!important2、实现源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3之position</title> <style type="text/css...
效果图： 代码实现：样式部分style.css:*{margin: 0;padding: 0; } body{background-color: #673929;font-size: 16px;font-family: "微软雅黑" } #conters{margin: 0 auto;width: 900px; }#header{height: 220px;margin-bottom: 5px;position: relative; } #icon-list{position: absolute;top:170px;right: 30px;width: 130px;height: 30px;/*font-size: 0;*/ }#nav{height: 30px;background: #09c;margin-bottom: 5px;font:18px...
CSS3设计3D效果图使用到CSS3中的变形、缩放、倾斜。只写了兼容Gecto的。发张图片鼓励自己<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.cube{position:fixed;left:50%;top:12px;}.cube p{line-height:144px;font-size:12px;}.cube h2{font-weight:bold;}.cube.one{top:200px;left:50%;margin-left:-200px;}.topFace, .leftFace, .rightFace div /*统一三面的尺寸*/{width:272px;height:26...
关于图片的旋转，一般来说有3种解决方案：（1）滤镜 （2）css3 （3）canvas。接下来逐一讲解。为了方便理解，我们主要以90度整倍数讲解，兼顾其他角度。 1. 滤镜（IE专属） 1.1 旋转滤镜 语法如下： filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i); rotation取值0（0或360度），1（90度），2（180度），3（270度）。取其他数无效。 旋转90度示例： css： #box { width: 100px; ...
什么是属性前缀 为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 例如：transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */使用插件来帮助我们进行前缀的自动添加，会大大提升我们的开发效率，提供编码效率。 此次是关于如何通过po...
转：http://blog.csdn.net/tangtang5963/article/details/51490107 https://segmentfault.com/a/1190000002780453#articleHeader18css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。最常用的就是用css实现的小三角了#triangle-up{ display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-bottom:50px solid red;} #triangle-down ...