今天写了几个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 ...
随机推荐
- JavaIO流（02）RandomAccessFile类详解
RandomAccessFile类 该类主要是对文件内容进行操作,可以随机的读取一个文件中指定位置的数据: 但是如果想实现这样的功能,则每个数据的长度应该保持一致: 构造方法: 接受File类 ...
- poj 3180 The Cow Prom（强联通分量）
http://poj.org/problem?id=3180 The Cow Prom Time Limit: 1000MS Memory Limit: 65536K Total Submissi ...
- HDU4570----Multi-bit Trie----简单的DP
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4570 题目意思: 给你N个数 要你分成多段,每段长度不能超过20 是的sum(ai*(2^bi))最小 ...
- 位运算&字节运算
- Angularjs 初始化框架
bindJQuery(); publishExternalAPI(angular); jqLite(document).ready(function() { angularInit(document, ...
- jsp界面动态时间显示
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 【M26】限制某个class所能产生的对象数量
1.每当产生一个对象,必定调用构造方法.因此,禁止产生对象的做法就是,将所有的构造方法声明为private. 2.只有在类的内部才可以访问private成员,有两层含义:在类的内部可以访问this的p ...
- Codeforces Gym 100286B Blind Walk DFS
Problem B. Blind WalkTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/cont ...
- codeforce447 D SGU 548 贪心+优先队列
codeforce447 D - DZY Loves Modification 题意:有一个n*m的矩阵,每次可以选择一行或者一列,可以得到这行或这列的所有元素sum的积分,然后使这一列/行的每一个元 ...
- CircleDisplay
https://github.com/PhilJay/CircleDisplay