今天写了几个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 ...
随机推荐
- Spring入门（2）-通过构造器注入Bean
Spring入门(2)-通过构造器注入Bean 前一篇文章将了最基本的spring例子,这篇文章中,介绍一下带有参数的构造函数和通过构造器注入对象引用. 0. 目录 带有参数的构造函数 通过构造器注入 ...
- inline（内联函数）
一般来说,调用函数会造成:目前的指令位置被存储下来,程序流跳转到所调用的函数,然后执行调用函数,最后跳转回之前存储的位置.对于需要常常调用的小函数来说,这会影响程序的运行效率.所以,c99新增了inl ...
- 对.NET的认识
.NET其实就是一个软件平台,这个平台和Java平台有许多的相似之处,主要表现在 1.二者编写的程序都是可以跨平台执行的 2.二者编写的程序编译后生成的都是一种中间码(IL),需要经过第二次编译才 ...
- 如何将std::string转int,double? (C/C++) (C) (template)
http://www.cnblogs.com/oomusou/archive/2008/08/01/525647.html http://blog.sina.com.cn/s/blog_a843a88 ...
- lua入门
print("hello lua") lua官网 在线运行代码 数据类型 数据类型 描述 number 数字,可当作double,5/2 == 2.5 string 字符串 nil ...
- QRadioButton类中Toggled()信号的使用方法
QRadioButton类中Toggled()信号的使用方法 1.说明 QRadioButton中,Toggled()信号是在Radio Button状态(开.关)切换时发出的,而clicked()信 ...
- 发布方配ASP.NET网站服务器
方配ASP.NET网站服务器是一款简单,轻量,灵活的ASP.NET网站服务器,使用它可以无需安装复杂的IIS,直接就可以运行ASP.NET网站,使用非常简单,把exe文件拷贝到ASP.NET的网站目录 ...
- 配置DNS服务器IP
#############################脚本功能及说明#################### #该脚本用来在本地服务器上配置DNS服务器IP #创建时间:2014-10-22 ## ...
- Delphi 7 升级到 Delphi 2010 总结
1 字符串 >>string =unicodeString 字母的处理要定义AnsiString了 >>PChar =PWidechar >>str='普通汉字' ...
- cookie转CookieCollection
CookieCollection cookiesResponse = new CookieCollection(); if (response != null) { foreach (string c ...