精通CSS-读书记录 ch4

最新推荐文章于 2024-03-14 21:40:53 发布

vardemy

最新推荐文章于 2024-03-14 21:40:53 发布

阅读量137

点赞数

分类专栏：精通CSS读书记录文章标签： CSS

本文链接：https://blog.csdn.net/qq_36744349/article/details/79842890

版权

精通CSS读书记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第四章背景图像效果

4.1 背景图像基础

background-repeat（除了repeat, no-repeat, repeat-x, repeat-y还有round，space）， background-position我还没用过呢= =

background-attachment：scroll/fixed

灵活的圆角框

"因为没有给这个框设置高度，所以它会随着文本尺寸的增加进行垂直扩展"

滑动门技术：因为一个图像在另一个图像上滑动，将它的一部分隐藏了起来。

这个方法需要4个图像：两个顶部图像组成顶部曲线，两个底部图像组成底部曲线和框的主体。因此，底部图像的高度必须与框的最大高度相同（？？？）

照着书上抄代码尝试，结果却怎么也显示不出来，看了好久才发现是url中多了一斜杠。本是img/xxx.gif写成/img/xxx.gif就不行了。html中url路径请求的六种方式：无斜杠、单斜杠（/）、点+单斜杠（./）、点点+单斜杠（../）、多个点点+单斜杠（../../）、全路径

我之前忽略了一个问题，就是背景图像不一定是要全部显示出来的，默认情况下是会产生截短的吧。此外要使用多层嵌套才能产生覆盖效果吗？尝试在同一DIV里加了第二层背景图结果完全没有背景了。不过似乎是我写法有问题。

可以在同一DIV中添加多张背景图，不过背景图的添加的先后顺序非常重要，写在前面的会被放在最上面。

如

background:url("img/top-right.gif") top right no-repeat,

url("img/bottom-right.gif") bottom right no-repeat,

url("img/top-left.gif") top left no-repeat,

url("img/bottom-left.gif") bottom left no-repeat;

这就是滑动门，可以学下一部分了。

山顶角

border-image：允许指定一个图像作为元素边框。但似乎该元素需要在横向和纵向都对称才能获得勉强可以的效果...

又在网上找到了一篇关于山顶角的博文，一个处理border的trick。链接在这里：CSS实现山顶角的原理

看到一半就立刻去写了下对话框，其上突出的角我的处理办法是两个山顶角叠加，一个是边框颜色一个是中间文本的背景色，很容易想到的解决办法。demo如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border</title>
<style type="text/css">

.container
{
    height:100px;
    width:200px;
    border:5px solid pink;
    overflow:hidden;
    background-color:white;
    position:relative;
    overflow:visible;
}
    .angle{
        height:0;
        width:0;
        border-width:15px;
        border-style: solid dashed dashed dashed;
        border-color:pink transparent transparent transparent;
        position:absolute;
        bottom:-30px;
        left:50px; 
    }
    .void{
        height:0;
        width:0;
        border-width:8px;
        border-style: solid dashed dashed dashed;
        border-color:white transparent transparent transparent;
        position:absolute;
        top:-15px;
        left:-9px;
    }
</style>
</head>
 
<body>
    <div class="container">
        excusez moi???
    <div class="angle"><div class="void"></div> </div>
    </div>
</body>
</html>

本来也没啥大问题，但还是给绊了两下。

a.自己虽然解决了但仍然不懂是什么原理。我把angle用绝对定位移到container之下，但是移出去的部分都消失了，想了半天也不明白为什么，猜测也许能利用overflow解决，便试成功了。

b.我定位void的时候又出岔子了，void不在我想要的地方，一瞬间我又觉得自己可能白学定位了。不过想了一会儿，我突然发现void的定位点是在angle内的，而不是在边框上，因为此处angle的高宽都设为0了，而其主体全是border，潜意识里又认为定位起点在可看见的地方。

此外不要忘了border的每边长度并非得一样的。所以可以做出长方形blah blah

4.3 投影

4.3.1 简单的CSS投影

“因为div是块级元素，所以它们会水平伸展，占据所有可用空间”

《精通CSS》中讲投影部分是用制作的阴影作为背景添加在图像其后...（out of fashion）

css视差效果

只是改变了background-position的值.原理不是很清楚了。

图像替换

（我都不知道是个什么效果）