css复习——opacity（不透明度）、IE6固定定位、border-radius（圆角）

来源：互联网发布：雨田开版软件编辑：程序博客网时间：2024/06/05 18:42

0718

opacity

opacity 不透明度
能够改变元素以及元素里面的所有内容的（不）透明度
IE8以及IE8以下的浏览器不支持opacity
filter:alpha(opacity=0~100);
兼容IE9以及IE9以下的浏览器

.main{            width:500px;            height:300px;            color: #f00;            text-align: center;            line-height:100px;            font-size:40px;            filter:alpha(opacity=30);            border:10px solid #f22e00;            background: #000 url(img/banner_01.png) no-repeat;        }

IE6固定定位

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        html{            height:100%;            overflow: hidden;        }        body{            height:100%;            overflow: scroll;            margin:0;        }        .box{            width:200px;            height:200px;            background-color: #0e3757;            position: absolute;            top:0;            left:0;        }    </style></head><body><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><div class="box"></div></body></html>

border-radius

一个值四个角
两个值第一个值———— 左上右下第二个值———— 右上左下
三个值左上右上（第二个值）右下左下（第二个值）
四个值左上右上右下左下（顺时针）

阅读全文

0 0