border | 易学教程

css3.0实现的各种形状

阅读更多关于 css3.0实现的各种形状

#square { width: 100px; height: 100px; background: red; } 有兴趣的话，最好是自己试试以下！······ #rectangle { width: 200px; height: 100px; background: red; } #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but slightly less support: use "50%" as value */ #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } /* Cleaner, but slightly less support: use "50%" as value */ #triangle-up { width: 0; height: 0; border

神奇的CSS形状

阅读更多关于神奇的CSS形状

在StackOverflow上有这么一个问题，有位同学在 http://css-tricks.com/examples/ShapesOf CSS/ 找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。形状是：代码是： #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 这位同学就提问啦，为啥这么这么几句就能画出一个三角形呢？于是呢，有高人出现，这个高人图文并茂的解释了这个三角的成因首先呢，我们需要了解HTML标记的Box Model（盒模型），这个例子中呢我们将 content，padding都看作content。忽略掉margin。那么一个盒模型就是下图中间是内容，然后是4条边。每一条边都有宽度。根据上面CSS的定义，没有border-top（顶边）的情形下 ,我们的图形如下： width设置为0后，内容没有了就成为下图： height也设置为0，只有底边了。然后两条边都是设置为透明，最后我们就得到了这个属于奇技淫巧，但是也说明CSS的强大，没有做不到只有想不到。另外 http://css-tricks.com

The Shapes of CSS（css的形状）

阅读更多关于 The Shapes of CSS（css的形状）

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser. （下面的所有内容只使用一个HTML元素。任何一种CSS都可以，只要它在至少一个浏览器中支持。） Square （正方形） /*--> */ /*--> */ #square { width: 100px; height: 100px; background: red; } Rectangle （长方形） /*--> */ /*--> */ #rectangle { width: 200px; height: 100px; background: red; } Circle （圆形） /*--> */ /*--> */ #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but slightly less support: use "50%" as value */ 半圆形（Semicircle）扇形

45个值得收藏的 CSS 形状

阅读更多关于 45个值得收藏的 CSS 形状

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 1.正方形 #square { width: 100px; height: 100px; background: red; } 2.长方形 #rectangle { width: 200px; height: 100px; background: red; } 3.圆形 #circle { width: 100px; height: 100px; background: red; border-radius: 50% } 4.椭圆形 #oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } 5

奇妙的 CSS几何图形

阅读更多关于奇妙的 CSS几何图形

三角形：通常会使用透明的border模拟出一个三角形：▲ .traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; } 切角：采用多重线性渐变实现切角 .notching { width: 40px; height: 40px; padding: 40px; background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left, linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right, linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right, linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } 梯形：

绘制三角形（sass）

阅读更多关于绘制三角形（sass）

绘制三角形 /// draw triangle /// @param {type} $type [''] - triangleUp triangleDown triangleLeft triangleRight /// @param {Size} $border-value-1 /// @param {Size} $border-value-2 /// @param {Size} $border-value-3 /// @param {color} $border-color /// @require @mixin draw-triangle($type: '', $border-value-1: 50px , $border-value-2: 50px, $border-color...) { width: 0; height: 0; @if $border-color != '' { @if $type == 'triangleUp' { border-left: $border-value-1 solid transparent; border-right: $border-value-2 solid transparent; border-bottom: solid $border-color; } @if $type == 'triangleDown' { border

css实现实心三角形

阅读更多关于 css实现实心三角形

1、html <body style="flex-direction: column; height: 600px;display: flex; justify-content: center; align-items: center;">  <div class="up"></div></br>  <div class="down"></div></br>  <div class="left"></div></br>  <div class="right"></div> </body> 2、css /*想获取朝那边三角形,给相反的一边设置颜色,font-size: 0;line-height: 0;可以兼容ie6*/ .up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #f00; font-size: 0; line-height: 0; } .down { width: 0; height: 0; border-left: 20px solid transparent;

详解css绘制三角形

阅读更多关于详解css绘制三角形

1.首先画一个div，给固定宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Trangle</title> <style> div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h3>三角形</h3> <div> </div> </body> </html> 2.给div加上边框顺序为上，右，下，左 div{ width: 100px; height: 100px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid saddlebrown; } 3.去掉div的宽度和高度 div{ width: 0px; height: 0px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom

了解HTML表单之13个表单控件

阅读更多关于了解HTML表单之13个表单控件

前面的话　　input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、 label、 optgroup、textarea、fieldset、 legend 这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件传统控件　　 button 　　　　　　定义一个按钮　　 select 　　　　　　定义一个下拉列表　　 option 　　　　　　定义下拉列表中的一个选项　　 optgroup 　　　　定义选项组，用于组合选项　　 textarea 　　　　　定义多行的文本输入控件　　 fieldset 　　　　　分组表单内的相关元素　　 legend 　　　　　　定义fieldset元素的标题　　 label 　　　　　　定义input元素的标注 button 　　button元素用来定义一个按钮，button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为　　始终为button元素设置type属性，IE7-浏览器的默认类型是button，而其他浏览器的默认类型是submit 　　IE7-提交button元素之间的文本，而其他浏览器则会提交value属性的内容　　

css-三边框,外边距和内边距

阅读更多关于 css-三边框,外边距和内边距

<div style="width:100px;height:50px;border: solid black 1px;position: absolute;right: 500px; bottom:200px;"></div> <div style="width:100px;height:50px;border: dotted red 3px;position: absolute;right: 500px; bottom:300px;"></div> <div style="border-top-right-radius: 50px;background-color:#9C27B0;border-left-color: gray;border-top-width: 5px;width:100px;height:50px;position: absolute;right: 500px; bottom:400px;"></div> 来源： https://www.cnblogs.com/tingbogiu/p/5530154.html

订阅 border