今天写了几个css属性
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
border-width: 1px 10px 30px;
border-style: solid;
border-color: #999;
}
#d2{
border-width: 4px;
border-style: double;
}
#d3{
border-width: 1px;
border-style: dotted;
}
#d4{
border-width: 1px;
border-style: dashed;
}
#d5{
border-width: 4px;
border-style: groove;
}
#d6{
border-width: 4px;
border-style: ridge;
}
#d7{
border-width: 4px;
border-style: inset;
}
#d8{
border-width: 8px;
border-style: outset;
}
#d9{
border: 1px solid #ffaa00;
}
#d10{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #f00;
border-right: 1px solid #0f0;
}
div.trans{
border: 10px solid transparent;
}
body{
/*background-color: #afa;*/
}
*{
margin: 0;
padding: 0;
}
input{
border: 0.5px solid #A9A9A9;
}
input:focus{
outline: #A5C7FE solid 1px;
}
</style>
</head>
<body>
<div id="d1">商品评论区</div><br/>
<div id="d2">商品评论区</div><br/>
<div id="d3">商品评论区</div><br/>
<div id="d4">商品评论区</div><br/>
<div id="d5">商品评论区</div><br/>
<div id="d6">商品评论区</div><br/>
<div id="d7">商品评论区</div><br/>
<div id="d8">商品评论区</div><br/>
<div id="d9">商品评论区</div><br/>
<div id="d10">商品评论区</div><br/>
<div class="trans">一个区块</div>
<div class="trans">二个区块</div>
<br/>
<input />
ABCDEFG
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
border: 1px solid #888;
border-radius: 0px 5px;
}
#d2{
width: 300px;
height: 200px;
border: 1px solid #888;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="d1">商品的评论内容</div><br/>
<div id="d2">商品的评论内容</div><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: -10px -10px;
}
#d2{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 10px -10px;
}
#d3{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 20px 20px #999;
}
#d4{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 20px 20px 5px #999;
}
#d5{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 20px 20px 5px 10px #999;
}
#d5{
border: 1px solid #888;
width: 300px;
height: 100px;
box-shadow: 2px 2px #999 inset;
}
input{
border: 1px solid #666;
box-shadow: 2px 2px #aaa inset;
}
</style>
</head>
<body>
<br/>
<div id="d1">一个区块</div><br/>
<div id="d2">一个区块</div><br/>
<div id="d3">一个区块</div><br/>
<div id="d4">一个区块</div><br/>
<div id="d5">一个区块</div><br/>
<div id="d6">一个区块</div><br/>
ABCDEFG
<br/>
<input />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title></title>
<style>
#d1{
width: 200px;
height: 100px;
border: 10px solid #aaa;
padding: 15px;
margin: 20px;
}
#d2{
margin-top: 30px;
}
#d3{
}
</style>
</head>
<body>
<div id="d1">盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容盒子中内容</div>
<div id="d2">第二个盒子</div>
<hr/>
<div id="d3">第三个盒子</div>
<div id="d4">第四个盒子</div>
</body>
</html>
今天写了几个css属性的更多相关文章
- Discuzx系统 CSS 编码规范，CSS属性书写顺序
1. 属性写在一行内,属性之间.属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; } 2. 属性的书写顺序: ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
- 如何写出优雅的CSS代码 ？(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ？
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- css学习（2）-- 常见的CSS属性和值
1.CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...
- 那些年我们错过的超级好用的CSS属性
在看前辈写的CSS样式的时候发现好多之前都没用过的Css属性,现在看来有必要整理一下啦. 一.CSS选择器(http://www.w3school.com.cn/cssref/css_selector ...
- HTML编码规则、CSS属性声明顺序--简介
From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- css 属性
部分属性在firefox 中添加-moz- safari 以及chrome 加上-webkit- opera 加上-o- ie9里可能需要-ms- jquery 中的css 操作 和一般的cs ...
随机推荐
- BestCoder Round #65 hdu5590(水题)
ZYB's Biology Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- [C语言 - 2] C语言变量
A.变量的作用域: 1.局部变量:在函数或者代码块内部定义的变量 作用域:从定义处到代码块结束 生命周期:从定义处分配控件,代码块结束后被回收 局部变量没有默认值,要自己初始化 2.全局变量:在函 ...
- Serializable 剔除某些不想保存的字段 transient
示例: package cn.com.chinatelecom.mms.pojo; import java.io.Serializable; public class Person implement ...
- 几道 SQL 语句面试题
--S (sno,sname)学生关系,sno为学号 sname为姓名 --C(cno,cname,Cteacher)课程关系 cno为课程号,cname为课程名,cteacher 为任课教师 --S ...
- Delphi 7连接MySql 5.5.15
原文:http://blog.csdn.net/akof1314/article/details/6822902/ 网上有很多关于Delphi连接MySql数据库的文章,在这里,我只记录下自己测试过的 ...
- Web App 讲义教程
http://www.csdn.net/tag/web%E5%BA%94%E7%94%A8
- IOS学习之IOS沙盒(sandbox)机制和文件操作
IOS学习之IOS沙盒(sandbox)机制和文件操作(一) 1.IOS沙盒机制 IOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都 ...
- 交换a、b
有两个变量a和b,不使用任何中间变量交换a和b. 方法一: 采用如下方法: a=a+b; b=a-b; a=a-b; 这样做的缺点就是如果a.b都是比较大的数,则a=a+b时就会越界. 而采用: a= ...
- debian7安装oracle11g
1,安装必须包 apt-get install gcc g++ make binutils libc6 libc6-dev libstdc++6 libstdc++5 rpm gawk alien ...
- mysql自动备份策略
目标:每7天做一个完整备份,每天做一份binlog日志,第二周将之前的备份删除并产生新的完整备份和binlog日志,备份要求每天2:00自动完成 mysql 版本:mysql5.5 1.开启binlo ...