背景颜色透明度和css
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
背景颜色透明度
/*背景颜色透明a代表透明度,值是0-1*/
/*.da{
width: 200px;
height: 200px;
background-color: rgba(68,126,0,0.1);
}
*/
.db{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.5; /*整个元素透明度变化值0-1*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}
自定义字体和字体溢出
自定义字体(@font-face)
.txt{
width: 200px;
height: 100px;
font-size: 30px;
text-shadow: 5px 5px 3px gray;
border:1px solid red;
word-break:keep-all;
}
.txta{
width: 200px;
height: 30px;
font-size: 16px;
white-space: nowrap;
border:1px solid red;
overflow: hidden;
text-overflow:ellipsis;
font-family: heiti;/*只能显示电脑里面装了的字体*/
/*overflow:auto;*//* 超出div以外的内容隐藏以滚动条的方式显示内容*/
}
/*自定义字体*/
@font-face
{
font-family: songti;/*自定义字体的名称*/
src: url('simfang.ttf'),/*字体的位置*/
url('Sansation_Light.eot'); /* IE9+ */
}
@font-face
{
font-family: heiti;/*自定义字体的名称*/
src: url('simhei.ttf'),/*字体的位置*/
url('Sansation_Light.eot'); /* IE9+ */
}
Css
Css平移
transform: translate(100px,20px);/*平移第一个值代表left。第二个值top;*/
-ms-transform: translate(50px,20px); /* IE 9 */
-webkit-transform: translate(50px,20px); /* Safari and Chrome */
-o-transform: translate(50px,20px); /* Opera */
-moz-transform: translate(50px,20px); /* Firefox */
Cssx旋转
transform: rotate(60deg);/*rotate:旋转,以顺时针方向旋转的*/
Css元素改变大小
transform: scale(2,1.5);/*改变元素的大小,第一个值代表初始元素宽度的倍数,
第二个值高度的倍数;*/