-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius: 75px 0 0 75px;
}
</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div>
</body>
</html>
查看全部 -
<a href='#brand'></a> #brand:target,控制的是id值为brand的元素，
查看全部 -
用li标签的伪类渐变做导航栏的黑色条，绝对定位right：0直接定到li标签的最右边。最后一个li标签，通过li:last-child:before伪类删除背景。实现导航栏
查看全部 -
关于before,after单双冒号是一个历史遗留问题。
CSS3中，单冒号用于伪类，例如:first-child,:last-child等，主要是像普通类一样便于选择；
双冒号用于伪元素，例如::before,::after,是一个没写在HTML上的元素；
为什么before，after用单冒号也可以？因为这是在CSS2中定义的，是兼容IE低版本的写法，在CSS3中就严格规定要用双冒号了查看全部 -
在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
content配合CSS的伪类或者伪元素，一般可以做以下四件事情：
功能
功能说明
none
不生成任何内容
attr
插入标签属性值
url
使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
string
插入字符串
查看全部 -
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个
outline-offset属性，其取值说明如下。属性值
属性值说明
outline-color
定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。
outline-style
定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。
outline-width
定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。
outline-offset
定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
inherit
元素继承父元素的outline效果。
查看全部 -
resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。
resize: none | both | horizontal | vertical | inherit取值说明：
属性值
取值说明
none
用户不能拖动元素修改尺寸大小。
both
用户可以拖动元素，同时修改元素的宽度和高度
horizontal
用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical
用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit
继承父元素的resize属性值。
查看全部 -
Responsive布局技巧
通过上面的介绍，大家对响应式设计有了一定的了解，但在实际制作中还是有一些布局技巧的：
在Responsive布局中，可以毫无保留的丢弃：
第一， 尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置。
有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？
第一，使用HTML5 Doctype和相关指南；
第二，重置好你的样式（reset.css）；
第三，一个简单的有语义的核心布局；
第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。
使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。
说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去
查看全部 -
大屏pc分辨率：min-width:768px; 一般pc分辨率：min-width:640px; 平板分辨率：min-width:480px; 手机分辨率：min-width：320px;
查看全部 -
<h4>5. not关键词</h4><p>使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：</p><pre>@media not print and (max-width: 1200px){样式代码}</pre><p>上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中</p><p>only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用</p>查看全部
-
查看全部 -
3D动画css样式
body{
background:#000;
}
h1 {
text-align:center;
color:white;
font-size:50px;
font-family: 'Fruktur'， cursive;
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
animation: run ease-in-out 09s infinite;
-moz-animation: run ease-in-out 9s infinite ;
-webkit-animation: run ease-in-out 9s infinite;
-ms-animation: run ease-in-out 9s infinite;
-o-animation: run ease-in-out 9s infinite;
}
@keyframes run {
0% {
transform:rotateX(-5deg) rotateY(0);
}
50% {
transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
100% {
transform:rotateX(5deg) rotateY(360deg);
}
}
查看全部 -
媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：
值
设备类型
All
所有设备
Braille
盲人用点字法触觉回馈设备
Embossed
盲文打印机
Handheld
便携设备
Print
打印用纸或打印预览视图
Projection
各种投影设备
Screen
电脑显示器
Speech
语音或音频合成器
Tv
电视机类型设备
Tty
使用固定密度字母栅格的媒介，比如电传打字机和终端
查看全部 -
/*创建flex布局*/
display: -webkit-flex;
display: flex;
/*设置 水平/垂直方向 为主轴*/
-webkit-flex-direction: row;
flex-direction: row;
/*设置项目在 主轴 上的位置*/
-webkit-justify-content: center;
justify-content: center;
/*设置项目在 副轴 上的位置*/
-webkit-align-items: center;
align-items: center;
查看全部 -
创建flex容器：
1 .flexcontainer{display: -webkit-flex;display: flex; }Flex项目：
主轴方向：flex-direction [ row（水平） | column（垂直） ]
项目移到顶部： [ flex-strat ]
主轴垂直：设置 align-items
主轴水平：设置 justify-content
即： row + align-items、column + justify-content创建flex容器：
1 .flexcontainer{display: -webkit-flex;display: flex; }Flex项目：
主轴垂直：设置 align-items
主轴水平：设置 justify-content
即： row + align-items、column + justify-content
主轴方向：flex-direction [ row（水平） | column（垂直） ]
项目移到顶部： [ flex-strat ]
查看全部
举报