CSS网页制作常用标签

「爱情、让人受尽委屈。」 2023-07-22 09:27 60阅读 0赞

做了一个简单的网页，从布局到加内容，遇到了很多小问题。很多标签和属性都不会用或者忘记了。所以以此记录一下。

**一、如何将边框四角变圆？（或做一个圆形）**

**顾名思义，如果要更改边框的角需要用到边框（border）的属性。**

**![format_png][]**

![format_png 1][]

**利用radius属性进行更改，后面的值越大，角的圆度越大。**

**![format_png 2][]→![format_png 3][]**

**画的很辛苦。点个[赞][Link 1]吧！！**

--------------------

**二、段落文字下划线（and整段）**

**1、鼠标悬浮下划线**

**通常我们写鼠标悬浮下划线的时候都会使用:border-bottom：1px solid black;这样的方式。但是对于一整段并分上下行的用此方法就会出现问题。**

**这个时候我们可以使用属性标签：text-decoration: underline;**

**underline：下划线**

#jjj:hover{
                    text-decoration: underline;
                }

![format_png 4][]→![format_png 5][]

**2、段落永久下划线**

#jjj:visited{
                    text-decoration: underline;
                }

![format_png 6][]→![format_png 7][]

**也可以使用link的方式：**

#jjj:link{
                    text-decoration: none;
                }

**效果是一样的。**

--------------------

**三、CSS延迟效果（transition）**

**这个效果是鼠标悬浮慢慢的或快快的变成其他效果。非常使用，也很好看。**

#jjj:hover{
                    background-color: black;
                    transition: 1s;
                }

![1050655-20161227120206148-1617167922.jpg][]![uploading.4e448015.gif][]转存失败重新上传取消![1050655-20161227120206148-1617167922.jpg][]

--------------------

**四、英文字母全部大写**

**使用标签属性：text-transform: uppercase;**

**![format_png 8][]![format_png 9][]**

** **

--------------------

**五、调整透明度 **

**对于一些需要调整透明度的，opacity用起来还是挺方便的。**

#jjj{
                    width: 200px;
                    height: 200px;
                    background-color: yellowgreen;
                    opacity: 0.6; 
                    }

![format_png 10][]![1050655-20161227134747695-1375918903.jpg][]![uploading.4e448015.gif][]转存失败重新上传取消![1050655-20161227134747695-1375918903.jpg][]

这世界只有懒人。没有庸人！

[format_png]: /images/20230528/bf4b445276d24ff485c5eaff8821026c.png
[format_png 1]: /images/20230528/75ef60ab0cf244b6a3e71dd80bfed29f.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA1MDY1NS8yMDE2MTIvMTA1MDY1NS0yMDE2MTIyNzExMTUxMDUzOS02MzYwODg3ODkuanBn?x-oss-process=image/format,png
[format_png 3]: /images/20230528/dbd05a1ba2f34dc69391f2778d430a2a.png
[Link 1]: http://www.cnblogs.com/zrifq/
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA1MDY1NS8yMDE2MTIvMTA1MDY1NS0yMDE2MTIyNzExNDAzNDIxMS01MjYzMDA0NDkuanBn?x-oss-process=image/format,png
[format_png 5]: /images/20230528/2e79f398e443464c9d001c1ebb596ff9.png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA1MDY1NS8yMDE2MTIvMTA1MDY1NS0yMDE2MTIyNzExNDc0MTE3OS0xMzUyOTY1NDM5LmpwZw?x-oss-process=image/format,png
[format_png 7]: /images/20230528/7d24e47e5cc64cfe8d2dd522bd450dfa.png
[1050655-20161227120206148-1617167922.jpg]: /images/20230528/c020a509cc8940eaa04b827760e79191.png
[uploading.4e448015.gif]: https://csdnimg.cn/release/mp/img/uploading.4e448015.gif
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA1MDY1NS8yMDE2MTIvMTA1MDY1NS0yMDE2MTIyNzEzNDIzNTkxNC0xOTUyMzE4OTA1LmpwZw?x-oss-process=image/format,png
[format_png 9]: /images/20230528/b7360d7c8b334d9397bd24c8bcc46348.png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA1MDY1NS8yMDE2MTIvMTA1MDY1NS0yMDE2MTIyNzEzNDczODE3OS0xODQwMjEzNzAxLmpwZw?x-oss-process=image/format,png
[1050655-20161227134747695-1375918903.jpg]: /images/20230528/26668fb9611c423a9d3fa7d4b77b714f.png