HTML+css实例代码片段
好啦，废话不多说，我们来看代码！！！
css彩虹状态栏：
#ztl{
background:linear-gradient(#F00,#F60,#FF0,#0F0,#00F,#90F);
} /*彩虹状态栏*/
html手机端自适应网页：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
这句话是自动设置缩放，然而，它并不能完全适应所有的手机，并且你在用浏览器手机模式调试的时候可能正常，但是换到真实的手机端其实是不正常的。所以我们还要进行改动。
自动页面刷新：
<meta http-equiv="Refresh" content="1";/> <!--页面每1秒刷新一次-->
css3 渐变：
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
css3圆角：
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
实例：
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
css3 border-radius-指定每个圆角：
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。
- 一个值：四个圆角值相同。
以下3个实例：
1. 四个值 - border-radius: 15px 50px 30px 5px:
2. 三个值 - border-radius: 15px 50px 30px:
3. 两个值 - border-radius: 15px 50px:
css3 图片边框：
border-image 属性允许你指定一个图片作为边框！
实例：
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
css3文本效果
- 文字阴影
- 盒子阴影
- 文字溢出
- 自动换行
- 断字
css3文本阴影：
CSS3中，text-shadow属性适用于文本阴影。
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容。
实例：
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
CSS3的换行
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字。
实例：
p {word-wrap:break-word;}
CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则。
实例：
p.test2 {
word-break: break-all;
｝
css按钮
鼠标移动到按钮上后添加箭头标记实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>按钮动画</h2>
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
</body>
</html>
点击时添加“波纹”效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>
<h2>按钮动画 - 波纹效果</h2>
<button class="button">Click Me</button>
</body>
</html>
点击时添加“压下”效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<h2>按钮动画 - "按压效果"</h2>
<button class="button">Click Me</button>
</body>
</html>
浙公网安备 33010602011771号