CSS border

最新推荐文章于 2024-08-28 23:58:56 发布
最新推荐文章于 2024-08-28 23:58:56 发布
阅读量103 收藏
点赞数
分类专栏： CSS 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120705521
版权

虚线(dashed); 实线(solid); 双线轮廓(double);
顶部边框的线 border-top:1px solid gray;
取消边框 border:none;
有边框,但像素为0 border:0;
边框透明 border:transparent;
三角形箭头 font-size:0; width:0; height:0; border:15px solid transparent; border-left-color:aqua;
border-top-color:green;
取消下划线 text-decoration:none; 装饰(decoration)
字间距 letter-spacing 2px;
取消加粗 font-weight:normal;
左侧边距 padding-left:18px;(内边距 padding:18px;)
绝对定位 position:absolute:
相对定位 position:relative;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- dashed： 虚线; solid： 实线; double 双线轮廓
        顶部边框的线 border-top:1px solid gray;
        取消边框 border:none;
        有边框,但像素为0 border:0;
        边框透明 border:transparent;
        三角型箭头
        font-size:0;
        width:0;
        height:0;
        border:15px solid transparent;
        border-left-color:aqua;
        border-top-color:green;
        取消下划线 text-decoration:none; 装饰(decoration)
       字间距 letter-spacing 2px;
       取消加粗 font-weight:normal;
       左侧边距 padding-left:18px;(内边距 padding:5px)
       position:absolute;相对定位(relative); 绝对定位(absolute)
    -->
    <style>

        p {
            /*设置p标签光标的形状*/
            cursor: url("images/kai.jpg"), default !important;
        }

        @font-face {
            font-family: "caoshu";
            src: url("fonts/caoshu.TTF");
        }

        span, div, p {
            font-family: 'caoshu';
            border: 1px solid gray;
        }

        p {
            /*框顶部的线*/
            /*border-top: 1px dashed aquamarine;*/
            /*取消边框*/
            /*border: none;*/
            /*有边框,但像素为0*/
            /*border: 0;*/
            /*边框透明*/
            /*border:transparent;*/
            border: 1px solid transparent;
            text-align: center;
        }

        p:hover {
            border-color: gray;
        }

        /*三角形尖头*/
        .arrow {
            font-size: 0;
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-left-color: aqua;
            border-top-color: green;
        }

        .tt {
            /*取消下划线 装饰 decoration*/
            text-decoration: none;
            /*盒子*/
            display: block;
            /*字间距2像素*/
            letter-spacing: 2px;
            /*取消加粗*/
            font-weight: normal;
            width: 150px;
            height: 45px;
            background-color: aqua;
            font-size: 18px;
            /*行高*/
            line-height: 45px;
            /*左侧边距  内边距(padding:5px)*/
            padding-left: 18px;
            /*圆角效果 border-radius:5px 0 0 5px */
            border-radius: 5px 0 0 5px;
        }

        .tt::after {

            content: '';
            width: 0;
            height: 0;
            font-size: 0;
            border: 30px solid transparent;
            border-right-color: white;
            /*相对定位 relative; 绝对定位 absolute*/
            position: absolute;
            transform: translate(-3px, -8px);
        }

        .green {
            background-color: green;
        }
    </style>
</head>
<body>

<span>雪中悍刀行</span>
<div>div</div>
<p>玄甲、青梅、竹马、朝露、春水、桃花、峨眉、朱雀、黄桐、蚍蜉、金缕、太阿</p>
<p>Lorem ipsum dolor.</p>
<p>Dolores, nesciunt recusandae.</p>
<p>Eligendi, quam, vero.</p>

<!-- 三角符号 -->
<div class="arrow"></div>

<h3 class="tt">雪中悍刀行</h3>
<hr>
<a href="" class="tt">凯迪拉克C</a>
<br>
<h1 class="tt green">玄甲、青梅</h1>
</body>
</html>
卋舉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS border边框（理解网页边框制作）
百赢出品，必属精品
04-25 4938
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
css：border制作播放按钮（border制作三角形）
qq_53233068的博客
08-06 1710
css：border制作播放按钮 html代码块 <body> <div class="box"> <div class="btn"></div> </div> </body> css样式 <style> .btn{ width: 0; height: 0; border: 15px solid;
css border偏移
weixin_46972395的博客
03-22 1693
需要的效果 nav a:nth-child(1){ border-bottom: 2px solid white; padding-bottom: 8px; }
css border 虚线画法
weixin_41886421的博客
07-10 1513
众所周知，border的虚线是固定宽度，如果需要一个不限制宽度，可用`repeating-linear-gradient`画法
CSS border边框讲解教程（真的很详细）
(黎子)人生编码
06-24 3085
CSS Border 允许你定义元素的边框，包括其大小、样式和颜色。边框可以是实体的，也可以是空间的，它们可以是矩形，也可以是圆形或椭圆形，取决于元素的形状和属性的设置。
【 border虚线】CSS border虚线边框属性教程
04-11
学习之路不可停止，最近在研究CSS，今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程，教大家如何使用css制作网页中的虚线，巩固CSS border属性使用方法，感兴趣的同学可以参考一下。
CSS border 属性使用说明
12-03
在CSS（层叠样式表）中，`border`属性是一个非常重要的样式属性，它用于定义元素四周的边框。边框不仅能够增加视觉效果，还能帮助布局管理。本篇文章将详细解析`border`属性的使用，包括其取值、继承性、适用范围...
CSS border.docx CSS border.docx
01-15
CSS border-style 属性详解 CSS 中的 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。border-style 属性的值可以是 none、hidden、dotted...
css border 虚线的使用方法.docx
01-15
CSS border 虚线的使用方法 CSS border 虚线是一种边框样式，与实线边框不同，它是由虚线组成的。虚线边框可以用于突出显示元素或将元素分组。在本文中，我们将详细介绍 CSS border 虚线的使用方法。 什么是 CSS ...
CSS border虚线边框属性教程
01-19
上下左右边框交界处呈现...CSS Code复制内容到剪贴板 #test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px; } 示例2： 在上面的
《CSS 3D 变形探秘：开启网页设计新维度》
最新发布
qq_69304031的博客
08-28 264
可以分别控制 x 轴、y 轴和 z 轴的缩放比例，实现不同方向的拉伸或压缩。transform scale(sx,sy，sz)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，沿z轴是z如果sy省略，默认sy=sx。transform scale(sx,sy)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，如果sy省略，默认sy=sx。函数可以使元素沿 x 轴或 y 轴倾斜，为设计带来独特的视角效果。ranslate(tx,ty,tz]:沿x轴移动tx距离，沿y轴移动ty的距离。
CSS中的align-content属性：实现垂直居中的新方式
weixin_45274678的博客
08-28 641
在CSS中，align-content属性原本主要用在Flexbox和Grid布局中，用于控制交叉轴（crossaxis）上内容的对齐方式。但在2024年，浏览器开始支持在默认布局（flowlayout）中使用align-content，从而实现了使用单一CSS属性即可实现垂直居中的效果。align-content属性的引入为CSS的垂直居中问题提供了一个全新的解决方案。通过使用这一属性，我们可以在默认布局中轻松实现内容的垂直居中，而无需依赖Flexbox、Grid或其他复杂的布局方式。
CSS系列之详解overflow（四）
易雪寒的博客
08-28 64
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。如果没有明确设置宽度和高度，浏览器将会自动根据内容进行调整，此时 overflow 属性可能不会产生预期的效果。
CSS学习
2301_77205900的博客
08-28 413
CSS全称Cascading Style Sheets一种样式表语言，为html标签修饰定义外观，分工不同CSS与HTML关系html是网页的内容css是网页的样式（结构）
CSS实现水滴效果图
N201871643的博客
08-26 44
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
Nuxt 项目实战 - 15：自定义unocss规则，让编写样式更高效
Potter：I am not for learning and learning, but for study and work
08-28 165
看到这个你发现问题了，由于我们颜色变量引用的是16进制颜色值，然后rgba的参数是4个，而且是用逗号隔开。可能你会想编译后改样式，类似webpack的css loader一样，但是我们会失去unocss的提示，在开发的时候还是很不方便。如果你有兴趣，欢迎加入你的加入，一起完善这个工具。，可以帮你一键将markdown发布至多平台，方便大家更好的传播知识和分享你的经验。说明：你可能会想到改unocss的规则，那么我们来试下。完美实现我们想要的效果，这样就可以更开心的写样式了。最近我开源了一个文章助手。
要隐藏滚动条，您可以使用CSS中的overflow属性。
爱敲代码的卡拉米的博客
08-28 193
请注意，隐藏滚动条可能会导致内容被截断或无法访问到超出视图范围的内容。请确保在隐藏滚动条时考虑到用户体验和页面布局。希望这个解决方案对您有帮助！如果有任何问题，请随时告诉我。元素的滚动条隐藏起来。确保将这段样式代码添加到您的Vue组件的样式部分中，并且根据需要调整选择器以匹配您想要隐藏滚动条的元素。要隐藏滚动条，您可以使用CSS中的。
CSS系列之浮动清除clear（三）
易雪寒的博客
08-28 138
可以看到我们的底部盒子不在原来的位置了，原因是什么呢,原因就是此时父元素我们并没有给他设置高度，父元素的高度完全是1号2号盒子撑起来的，现在给1号2号盒子添加了浮动，不占据原来的位置了，所以父元素此时的高度为零，不占位置了，底部盒子就会上去,造成高度塌陷。直接给第二个盒子添加一个clear:left 这里需要注意,clear消除的是上一个盒子对自己的影响，所以，前面一个盒子往哪边浮动，我们就clear哪边，这里的上一个盒子是float:left，所以我们在第二个盒子上添加的也是clear:left。
css隐藏元素
weixin_42812634的博客
08-28 88
css实现隐藏元素的方法有哪些 display:none; 元素被移除，不占据空间 visibility:hidden; 元素不可见，但是占据空间 opacity:0; 元素不可见，但是占据空间 position:absolute; left:-999px; width:0; height:0; overflow:hidden;
css border
06-02
CSS的border属性用于设置元素的边框，语法如下： ``` border: [border-width] [border-style] [border-color]; ``` 其中，border-width、border-style和border-color分别表示边框的宽度、样式和颜色。也可以单独设置每个属性，如： ``` border-width: 1px; border-style: solid; border-color: black; ``` 这样就会将元素的边框设置为1像素宽的黑色实线边框。另外，还可以使用border-top、border-right、border-bottom和border-left属性单独设置每个边框的样式、宽度和颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值