CSS中的border的妙用

最新推荐文章于 2024-08-20 14:34:45 发布
最新推荐文章于 2024-08-20 14:34:45 发布
阅读量792 收藏
点赞数
文章标签： border css xhtml float html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myfootprint/article/details/2452841
版权

最近在网上看到一篇文章，写的是CSS做了以个立方体，效果真的不错，于是就模仿着写了这个。在网页布局中，通过设置border就可以实现图片的阴影效果了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>  

<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 

 <meta name="author" content="Abamboo" />

  <meta name="keywords" content="" />  

<meta name="description" content="" /> 

 <meta name="robots" content="all" />

<html>

<head> 

<title>Untitled</title></head>

<body><div style="width:210px;overflow:hidden;">

<div style="width:190px;height:0px;float:left;border-left:solid 10px Gray;border-top:solid 10px Black;"></div>

<div style="width:0px;height:0px;float:left;border-right:solid 10px Gray;border-top:solid 10px Black;"></div>

<div style="width:190px;height:150px;float:left;border-left:solid 10px Gray;border-bottom:solid 10px Black;background-color:#eef7dd;">

<div style="text-align:center;padding-top:20%;"> 四川汶川县最新灾情报告……</div>

</div>

<div style="width:0px;height:150px;float:left;border-right:solid 10px Gray;border-bottom:solid 10px Black;"></div>

<div style="width:20px;height:30px;float:left;background-color:Black;margin-left:50%;"></div>

<div style="width:50px;height:0px;margin-left:15%;float:left;border-left:solid 30px #fff;border-bottom:solid 30px Silver;"></div>

<div style="width:50px;height:0px;float:left;border-right:solid 30px #fff;border-bottom:solid 30px Silver;"></div>

</div></body></html>

myfootprint
关注
CSS border边框（理解网页边框制作）
百赢出品，必属精品
04-25 5454
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
CSS border的妙用
01-26
我们完全可以利用CSS去实现各种图形效果，而不用自己动手去做图片
border的使用
咸鱼!!!
05-14 1667
border的使用 例子1 div{ width: 300px; height: 500px; background: pink; border: 10px gold solid; } border:线的大小 颜色 线条的样式 注意这三个不分区...
CSS属性详解——使用border属性设置边框
Wod_7的博客
05-23 8527
CSS 的border属性是一个非常有用的属性，它可以为网页元素设置边框样式、宽度和颜色等。本文介绍了border属性的详细语法和使用方式，主要包括和等属性的具体含义和使用方法。如有疑问，欢迎提出。希望本文对您有所帮助。
border的所有用法
H1453571548的博客
08-23 929
border的所有用法 border-radius 意思为边框圆角：圆角半径 设置方向为 左上角 右上角 右下角 左下角
border详解
最新发布
qq_43592674的博客
08-20 122
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
CSS3中currentColor关键字的妙用
09-24
### 关键字的妙用 #### 初识currentColor MDN（Mozilla Developer Network）对currentColor的解释是，它是一个CSS变量，存储了颜色值，这个值来自当前元素的color属性。如果你在CSS中需要使用颜色的地方使用...
妙用CSS变量，让你的CSS变得更心动
01-08
【CSS变量】，又称CSS自定义属性，是CSS中的一项重要特性，允许开发者在CSS中定义和使用变量，提升代码的可维护性和复用性。CSS变量的主要优势体现在以下几个方面： 1. **减少代码重复**：通过定义全局或局部变量，...
css 透明边框background-clip妙用
01-19
本篇文章主要介绍了css 透明边框background-clip妙用，分享给大家，也给自己留个笔记 <div class=border> .border { width: 300px; height: 300px; background: url...
CSS 绝对定位 7 大应用场景实战案例分享
艾编程带你学前端博客
12-09 661
今天我们来分享web前端CSS定位中的position：absolute绝对定位的应用场景案例的相关场景！绝对定位是CSS中非常中啊哟的知识点，接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解！绝对定位元素的特性绝对定位元素常见用法合集。
border的几个用法。
m0_37727198的博客
07-24 3598
1.三等分 2.传统的十字添加 3.定义块状元素的高度，边界 4.三角形 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ margin:0; p
CSS中Border(边框)
weixin_43555093的博客
03-19 3198
1.css边框 css边框(border)可以使围绕元素内容和内边距的一条或多条线,对于这些线条,可以直接自定义它们的样式,宽度颜色等. 2.边框样式 border-style的值 | none 默认无边框 dotted 定义一个点线框 dashed 定义一个虚线框 solid 定义实线边界 double 定义两个边界,两个边界的宽度和boder-width的值相同 ...
CSS三角 border: 20px solid #fff； width:0；height:0；
hangshao_123的博客
11-13 683
1.等腰三角形 尖角朝右边的三角形 div { width: 0; height: 0; border: 20px solid transparent; border-left-color: red; } 核心步骤： 1. 宽度和高度都设置为0 2. 四条边的边框设置大小，颜色，和样式 3. 其中一条边设置颜色为【transparent】 4. 设置left值，三.
Border的使用
kewb_2013的专栏
03-01 1329
Border的使用 Border类是应用在描绘组件的边界，Border本身是一个interface,里面定义了3个方法，为getBorderInsets()、isBorderOpaque() 、与isBorderOpaque()、与paintBorder().若您想使用Border类来绘制你的窗口边界，您必须先实现(implements)这3个方法，可说 是有点麻烦。还好，java本身提供了另
CSS中的三大样式
Meatball_MMY的博客
04-18 471
1.行内样式 复合样式 border: 1px solid silver border-left:1px solid silver border-left-style:solid border-left-color:silver border-left-width:1px; border-right:1px solid silver border-top:1px ...
css悬停效果_CSS3的原始悬停效果
culiao9310的博客
09-29 990
css悬停效果View demo 查看演示Download Source 下载源The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbna...
border之border-style用法
热门推荐
郑志雄
03-29 1万+
border-style border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 border-style兼容性很好，基本所有浏览器都兼容border-style拥有一下属性值 值 描述 none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点
html常用样式margin、border怎么使用
weixin_33971205的博客
06-05 1140
html常用样式margin、border怎么使用 一、总结 一句话总结：1、margin:auto配合width才能居中；2、border的三个属性依次是边框宽度，边框样式，边框颜色   1、html中的border样式里面记哪三个就OK了？ 解答：solid，double，ridge。       二、html常用样式margin、border怎么使用 1、margin（m...
border妙用
caimaomaocai的博客
04-08 719
border是一个很有意思的css属性，巧妙使用border，有些效果就可以不用图片border的关键字：thin，薄的,等同于1px                            medium(默认值)，中等的，相等3px                            thick，厚的，等同于4pxborder-style的默认值是none而不是solid，所以不设置border...
css中border样式
06-13
CSS 中的边框（border）样式用于控制 HTML 元素的边框样式、宽度和颜色等属性。边框样式可以使用 border 属性或 border-* 属性来设置，其中 * 表示边框的位置，包括 top（上）、right（右）、bottom（下）、left（左）。 例如，下面的样式设置了一个红色、宽度为 1 像素、实线的边框： ```css div { border: 1px solid red; } ``` 上面的样式将应用于所有的 `<div>` 元素，将其边框颜色设置为红色，宽度为 1 像素，边框样式为实线。 border 属性还可以接受三个参数，分别是边框宽度、边框样式和边框颜色，例如： ```css div { border: 2px dotted blue; } ``` 上面的样式将应用于所有的 `<div>` 元素，将其边框宽度设置为 2 像素，边框样式为点状线，边框颜色为蓝色。 border-* 属性可用于控制特定位置的边框样式，例如： ```css div { border-top: 1px solid green; border-right: 2px dotted yellow; border-bottom: 3px dashed purple; border-left: 4px double orange; } ``` 上面的样式将应用于所有的 `<div>` 元素，将其上边框宽度设置为 1 像素，边框样式为实线，颜色为绿色；将其右边框宽度设置为 2 像素，边框样式为点状线，颜色为黄色；将其下边框宽度设置为 3 像素，边框样式为虚线，颜色为紫色；将其左边框宽度设置为 4 像素，边框样式为双线，颜色为橙色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值