少用的css代码
盒子阴影
语法
box-shadow: h-shadow v-shadow blur spread color inset;
说明
值 | 描述 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
实例
.top {
box-shadow: 0 5px 5px #CCCCCC;
}
清除元素的默认轮廓
outline: none;
outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline其他属性
outline-color 规定边框的颜色
outline-style 规定边框的样式
outline-width 规定边框的宽度
inherit 规定应该从父元素继承 outline 属性的设置。
outline-style
说明
值 | 描述 |
---|---|
none | 默认。定义无轮廓 |
dotted | 定义点状的轮廓 |
dashed | 定义虚线轮廓 |
solid | 定义实线轮廓 |
double | 定义双线轮廓。双线的宽度等同于 outline-width 的值 |
groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值 |
ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值 |
inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值 |
outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值 |
inherit | 规定应该从父元素继承轮廓样式的设置 |
outline连写样式
outline-color, outline-style, outline-width
注意
请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
轮廓线不会占据空间,也不一定是矩形。
默认值: none
扩展
outline的层级顺序:
1、outline在不同的格式化上下文呈现是不一样的,在块级元素里面是可以覆盖上下两边的内容的。在内联元素之可以覆盖上面的内容。
2、通常情况下outline会按照后面覆盖前面的顺序正常显示(同等情况下,如同在文档流里面都没有浮动,或者都是浮动,定位的有z-index不算)
3、如果页面有浮动元素,则先显示浮动元素的outline,再显示正常文档流的outline(浮动元素的outline被没有浮动元素的outline覆盖)
background
语法
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
连写
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
说明
值 | 描述 |
---|---|
background-color | 规定要使用的背景颜色 |
background-position | 规定背景图像的位置 |
background-size | 规定背景图片的尺寸 |
background-repeat | 规定如何重复背景图像 |
background-origin | 规定背景图片的定位区域 |
background-clip | 规定背景的绘制区域 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动 |
background-image | 规定要使用的背景图像 |
inherit | 规定应该从父元素继承 background 属性的设置 |
图文对齐
语法
vertical-align: middle;
说明
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上 |
sub | 垂直对齐文本的下标 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
text-bottom | 把元素的底端与父元素字体的底端对齐 |
length | |
% | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值 |
inherit | 规定应该从父元素继承 vertical-align 属性的值 |
input对齐
第一种 直接用input写
这种不太好对齐 可能用 去对齐,但是太麻烦。
第二种 用table去布局
这种比较好对齐,可以采用
<table >
<tr><td>登录名</td><td><input type="text"></td></tr>
<tr><td>密码</td><td><input type="text"></td></tr>
</table>
效果是这样的
第三种 用label标签来对齐
<label for="inputs">登录名</label><input type="text" id="inputs"></input>
<br />
<label for="input2">密码</label><input type="text" id="input2"></input>
这样只需要在css中设定
label{
display: inline-block;
min-width: 100px;/*或者 width: 100px;*/
}
背景颜色渐变,只换颜色,不渐变
background: linear-gradient(to right, red 0%,red 50%,white 51%,white 100%);
清除浮动
代码
.product-details .w1200::after {
content: "";
display: block;
clear: both;
}
font样式连写
连写顺序
font-style font-variant font-weight font-size/line-height font-family
说明
值 | 描述 |
---|---|
font-style | 规定字体样式 |
font-variant | 规定字体异体 |
font-weight | 规定字体粗细 |
font-size/line-height | 规定字体尺寸和行高 |
font-family | 规定字体系列 |
caption | 定义被标题控件(比如按钮、下拉列表等)使用的字体 |
icon | 定义被图标标记使用的字体 |
menu | 定义被下拉列表使用的字体 |
message-box | 定义被对话框使用的字体 |
small-caption | caption 字体的小型版本 |
status-bar | 定义被窗口状态栏使用的字体 |
background连写
连写顺序
background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image
语法
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
说明
值 | 描述 |
---|---|
background-color | 指定要使用的背景颜色 |
background-position | 指定背景图像的位置 |
background-size | 指定背景图片的大小 |
background-repeat | 指定如何重复背景图像 |
background-origin | 指定背景图像的定位区域 |
background-clip | 指定背景图像的绘画区域 |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 |
background-image | 指定要使用的一个或多个背景图像 |