html字体相关属性，文本相关属性，背景相关属性，边框相关属性

最新推荐文章于 2023-02-27 09:34:00 发布

vivi_and_qiao

最新推荐文章于 2023-02-27 09:34:00 发布

阅读量376

点赞数

分类专栏： web前端开发文章标签： HTML 字体属性文本属性、背景属性边框属性

本文链接：https://blog.csdn.net/vivi_and_qiao/article/details/79868505

版权

web前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体相关属性，文本相关属性，背景相关属性,边框相关属性</title>
    <style type="text/css">
        div{
            border:1px solid #f00;/*为div元素增加边框并设置边框颜色为红色*/
            height:50px;/*为div指定长度和宽度*/
            width: 100px;
        }
    </style>
</head>
<body background="背景.jpg">
      <!-- border-style border-width分别用于设定组件的边框线型和边框线宽：可接受一个（指定上右下左）两个（指定上下，左右）三个（指定上，左右，下）四个（指定上右下左）参数 -->
         缩进20pt，字体颜色红色，并加粗及阴影效果，添加背景图片
         <div style="text-indent:20pt;color:red;font-weight: lighter;text-shadow: 20px,30px,50px,20;background-image: url(dancibenicon.bmp);background-attachment: scroll;background-repeat: repeat;">测试文字</div>
        缩进40pt，字体加粗，颜色蓝色，边框为虚线型,边框宽度为5px
         <div style="text-indent:40pt;color: rgb(0,0,255);font-weight: bold;border-style: dashed;border-width: 5px">测试</div>
        居中对齐，字体最粗，颜色绿色,指定下边框为点线边框，宽度为10px
         <div style="text-align:center;color:#00ff00;font-weight: bolder;border-bottom-style: dotted;border-bottom-width: 10px">测试文字</div>
        居右对齐,指定左右边框为3d凹槽，宽度5px
        <div style="text-align:right;border-left-style: groove;border-right-style: groove;border-left-width: 5px;border-right-width: 5px;">测试文字</div>
        文本从右边流入，设置字符间距,设置整个边框为3d凸槽边框，边框宽度10px
        <div style="direction:rtl;letter-spacing: 4px;border-style: ridge;border-width: 10px">测试文字</div>
        文本从左部流入,设置为圆角边框,分别设置边框上右下左的类型以及宽度
         <div style="direction:ltr;border-radius: 20px;">测试文字</div>
        强制文本不换行，添加背景颜色,只设置上边的角为圆角
        <div style="white-space:nowrap;background-color: #aaddff;border-top-left-radius: 20px;border-top-right-radius: 20px">测试文字测试文字测试文思</div>
        文字溢出时只是简单地剪裁
        <div style="overflow:hidden;white-space:nowrap;text-overflow: clip;">测试文字测试文字测试文思
        </div>
        文字溢出时用省略号表示,只设置下边角为圆角
        <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px">测试文字测试文思</div>
        <!-- 如果将word-break属性设置为break-all，则可以在单词中换行，若设置为keep-all则不能允许在单词内换行，这也是浏览器默认的行为-->
        不允许在单词内换行,字体大小超大,带中间划线
        <div style="word-break: keep-all;font-size: large;text-decoration:line-through;border-style: outset;
            border-width:20px;">we have a good day
        </div>
        允许在单词内换行，带上划线，并设置单词间距，
        <div style="word-break: break-all;text-decoration:overline;word-spacing: 5px">we have a good day
        </div>
        <!-- 如果把word—wrap属性设置为break-word，即可以让浏览器在长单词和url地址中间换行 word-wrap属性会尽量让长单词还有url地址不要换行，即使将其设置为breake-word，只有当一行文本都不足以显示这个长单词时，浏览器才会允许在长单词和URL地址中间换行-->
        利用word-wrap属性设置，允许在长单词和url中间换行，带下划线
        <div style="word-wrap: break-word;text-decoration:underline;">
            wehaveagoodday
        </div>
        利用word-wrap属性设置，不允许在长单词和url中间换行，带闪烁，字母转换为而大写
        <div style="word-wrap:normal;text-decoration: blink;text-transform: uppercase;">wehaveagoodday
        </div>
</body>
</html>