CSS样式美化div盒子

最新推荐文章于 2024-05-14 11:32:42 发布

今天不是愚人节

最新推荐文章于 2024-05-14 11:32:42 发布

阅读量3.2k

点赞数 2

分类专栏： HTML 学习 CSS 文章标签： CSS HTML 图片

本文链接：https://blog.csdn.net/qq_32446225/article/details/89295691

版权

HTML 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

学习

4 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

使用CSS样式美化div

字体及样式
盒子的属性
- 背景图片的详细设置属性
完整代码片
- 页面演示图片

字体及样式

	font-family: "等线 Light";   /*字体为等线 Light */
    font-size: 1.5em;           /*字体大小为默认值的2倍*/
    line-height: 1.5em;         /*行高为1.5倍*/
    color: deepskyblue;         /*字体颜色为deepskyblue*/
    line-break:unset;           /*断句方式*/
    text-indent: 2em;           /*首行缩进2单位*/

line-break貌似在这里并不起作用
首行缩进量以当前的段落字体为单位缩进

盒子的属性

 	width: 600px;             							  /*div宽600px*/
    height: 600px;             							  /*div高600px*/
    background: #FFCCCC;        						  /*背景颜色为FFCCCC*/
    background-image: url("img/5045d688f5d104ca.jpg");	  /*背景图像*/
    background-size: 550px;			     				  /*背景图像尺寸*/
    border: 2px solid #FFFFCC;  						  /*边框线宽1px 实线 颜色：#FFFFCC*/
    margin: 50px;              							  /*外边距为50px*/
    padding: 20px;            							  /*内边距为20px*/
    -webkit-box-shadow: 0 0 80px #3148ff;    		      //外阴影    /*x y 虚化半径 阴影颜色*/
    -webkit-box-shadow: 0 0 80px pink inset;    		  //内阴影    /*x y 虚化半径 阴影颜色*/

shaw属性设置值时可以以left top right bottom 虚幻量颜色来设置
以左开始，顺时针转动
貌似内阴影外阴影是不能同时使用的

背景图片的详细设置属性

		background-repeat:Properties; 			//图片的重复方式
		//Properties替换为属性值
		//repeat默认属性，背景图像将在垂直方向和水平方向重复。
		//repeat-x	背景图像仅在水平方向重复。
		//repeat-y	背景图像仅在垂直方向重复。
		//no-repeat	背景图像将仅显示一次。
		//inherit 规定应该从父元素继承 background-repeat 属性的设置。例如body元素等
		background-attachment: Properties;		//图片在鼠标滚轮滑动时动作
		//Properties替换为属性值
		//fixed 固定图片
		//revert跟随鼠标滑动

完整代码片

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: pink;
        }
        .box{
            width: 050%;               /*div宽600px*//*外边距为50px*/
            margin: 0 auto;
            font-family: "等线 Light";   /*字体为等线 Light */
            font-size: 1.5em;           /*字体大小为默认值的2倍*/
            line-height: 1.5em;         /*行高为1.5倍*/
            color: white;               /*字体颜色为white*/
            line-break:unset;           /*断句方式*/
            text-indent: 2em;           /*首行缩进2单位*/
            height: 1000px;              /*div高600px*/
            /*background: #FFCCCC;        !*背景颜色为FFCCCC*!*/
            background-image: url("img/5045d688f5d104ca.jpg");/*背景图像*/
            background-size: 550px;
            background-attachment: fixed;/*固定图片位置*/
            border: 2px solid #FFFFCC;  /*边框线宽1px 实线 颜色：#FFFFCC*/
            padding: 20px;              /*内边距为20px*/
            box-shadow: 30px 60px #2bab79 inset;
            -webkit-box-shadow: 0 0 80px #ff7d82;         //外阴影    /*x y 虚化半径 阴影颜色*/
            -webkit-box-shadow: 0 0 80px pink inset;      //内阴影    /*x y 虚化半径 阴影颜色*/
        }
    </style>
</head>
<body>
    <div class="box">
        <p>听说你的城市下雨了
            不知道你带伞了没有
            如果带了
            这雨就他妈白下了</p>
        <p>曾经语文老师教了我们一句英文I like you,but just like you．刚想说这个句子不错，正想把它摘抄到笔记本上时，老师告诉我们它的翻译：纵然万劫小复，纵然相思入骨我也待你眉眼如初，岁月如故．
        </p>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>页面底端</p>
</body>
</html>

页面演示图片

在这里插入图片描述

今天不是愚人节

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
CSS样式美化div盒子

使用CSS样式美化div字体及样式盒子的属性背景图片的详细设置属性完整代码片页面演示图片字体及样式 font-family: "等线 Light"; /*字体为等线 Light */ font-size: 1.5em; /*字体大小为默认值的2倍*/ line-height: 1.5em; /*行高为1.5倍*/ color: d...
复制链接

扫一扫