CSS3学习
Posted xingweikun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3学习相关的知识，希望对你有一定的参考价值。
CSS3 边框
用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
CSS3 圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
div {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background-color: #dddddd;
border-radius: 25px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
border-radius属性为元素添加圆角边框
</div>
</body>
</html>
CSS3 盒阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
div {
width: 200px;
height: 100px;
background-color:rosybrown;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
CSS3 边界图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
div {
border: 15px solid transparent;
width: 250px;
padding: 10px 20px;
}
#round {
-webkit-border-image: url(border.png) 30 30 round;
-o-border-image: url(border.png) 30 30 round;
border-image: url(border.png) 30 30 round;
}
#stretch {
-webkit-border-image: url(border.png) 30 30 stretch;
-o-border-image: url(border.png) 30 30 stretch;
border-image: url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 属性</p>
<p>border-image 属性用于设置图片的边框</p>
<div id="round">这里，图像平铺（重复）来填充该区域</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域</div>
<p>使用的图片素材</p>
<img src="border.png" alt="素材">
</body>
</html>
CSS3 圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(bg2.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>border-radius 属性允许向元素添加圆角</p>
<p>指定背景颜色元素的圆角</p>
<p id="rcorners1">圆角</p>
<p>指定边框元素的圆角</p>
<p id="rcorners2">圆角</p>
<p>指定背景图片元素的圆角</p>
<p id="rcorners3">圆角</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
#rcorners1{
border-radius: 50px/15px;
background: turquoise;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2{
border-radius: 15px/50px;
background: turquoise;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3{
border-radius: 50%;
background: turquoise;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>椭圆边框 - border-radius:50px/15px:</p>
<p id="rcorners1"></p>
<p>椭圆边框 - border-radius:15px/50px:</p>
<p id="rcorners2"></p>
<p>椭圆边框 - border-radius:50%:</p>
<p id="rcorners3"></p>
</body>
</html>
CSS3 背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
#example1{
background-image: url(img_flwr.gif),url(bg1.jpg);
background-position: right bottom,left top;
background-repeat: no-repeat,repeat;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div id="example1">
<h1>Learn CSS</h1>
<p>I love CSS, it is make web beautiful</p>
<p>Let us go!</p>
</div>
</body>
</html>
上面的样式也可以写为如下，效果是一样的
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(bg1.jpg) left top repeat;
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
body{
background:url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>原始图片:<img src="img_flwr.gif" width="224" height="162"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
body {
background: url(bg1.jpg);
background-size: 100%,100%;
background-repeat: no-repeat;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<pre>
KNN的全称是K Nearest Neighbors，
意思是K个最近的邻居，
从这个名字我们就能看出一些KNN算法的蛛丝马迹了。
K个最近邻居，
毫无疑问，
K的取值肯定是至关重要的。
那么最近的邻居又是怎么回事呢？
其实啊，
KNN的原理就是当预测一个新的值x的时候，
根据它距离最近的K个点是什么类别来判断x属于哪个类别。
</pre>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
#example1 {
border: 10px dotted black;
padding: 35px;
background: grey;
}
#example2 {
border: 10px dotted black;
padding: 35px;
background: grey;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 35px;
background: grey;
background-clip: content-box;
}
</style>
</head>
<body>
<p>没有背景剪裁(border-box没有定义):</p>
<div id="example1">
<h2>Learn CSS</h2>
<p>CSS make web beautiful</p>
</div>
<p>background-clip:padding-box;</p>
<div id="example2">
<h2>Learn CSS</h2>
<p>CSS make web beautiful</p>
</div>
<p>background-clip:context-box;</p>
<div id="example3">
<h2>Learn CSS</h2>
<p>CSS make web beautiful</p>
</div>
</body>
</html>
CSS3 渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
div {
height: 200px;
background-color: blue;
background-image: linear-gradient(#9198e5, #e66465);
}
</style>
</head>
<body>
<h3>线性渐变-从上到下</h3>
<p>从顶部开始的线性渐变。起点是蓝色，慢慢过渡到红色:</p>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
div {
height: 200px;
background-color: blue;/*不支持线性的时候显示*/
background-image: linear-gradient(to right, blue, yellow);
}
</style>
</head>
<body>
<h3>线性渐变-从左到右</h3>
<以上是关于CSS3学习的主要内容，如果未能解决你的问题，请参考以下文章