css之border,dispaly

border:即为边框设置

  solid:实线

  dashed:虚线

  dotted:圆点线

css代码:

.c1{
    width: 100%;
    height: 50px;
    border: 25px dotted red ;
}

效果图:

  

display:规定元素应该生成的框的类型

也有三个重要属性:

  none:隐藏,不显示框

  block:使成为块级标签

  inline:使成为内联标签

1、inline:使变成内联标签  

css代码:

.c1{
    background-color: #00a2ca;
    display: inline;
}

  html代码:

<body>
        <div class="c1">这是我的测试</div>
</body>

  效果图:

2、block:使变成块级标签

  css代码:

a{
    background-color: #00a2ca;
    display: block;
}

  html代码

<body>
        <a>我的测试</a>
</body>

  效果图

时间: 2024-11-05 14:54:33

css之border,dispaly的相关文章

通过CSS的border绘制三角形

通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: 1 .border { 2 width: 0; 3 height: 0; 4 5 border-color: transparent; 6 border-width: 1rem; 7 border-style: solid; 8 } 在上面的css基础上,添加下面的组合代码,将可以控制三角形的方向: 1 border

css中border画三角形

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name=&qu

css之border怎么写?

一个border 有三个属性:了解 1).边框颜色:border-color:#000 2).边框厚度(宽度):border-width:1px 使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值.否则设置边框border样式无效. 3).border边框样式:border-style:solid 简写:border:1px solid #000;  以后这么写 三个边有边一边没有边的设置技巧: 如左右下有边框并且样式为黑色1PX宽度实线边框,而上边

css的border效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 div{width: 100px;height: 100px;margin-top:50px; display: inli

Css之border属性

设置border属性作用:设置对象边框样式,设置单独上边框.下边框.左边框.右边框样式,实现美化美观.边框起到分割.规划布局作用. 1.四个边框 border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框样式使用border-top 设置上边框,一般单独设置上边框样式使用border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用. 2.四边相同边框border简写#divcss5{bo

CSS 利用border三角形绘制方法

CSS 三角形绘制方法,这里面的transparent比较重要,有和没有影响很大: 原理:这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形. 复制代码 代码如下: #triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent; /*border:  50px

理解CSS边框border

前面的话 ??边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 ??边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度).边框颜色和边框样式,且先后顺序无关 border: border-width border-color border-style border: 1px solid red; [边框样式] ??如果一个边框没有样式,边框将根本不会存在 ??关于虚线dashed,在chrome/firefox下,

css 利用border 绘制三角形. triangle

1.基础三角形. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全局css以及辅助css</title> 6 <style type="text/css"> 7 8 9 10 /***1: 初始样式设置*******/ 11 html, body, u

CSS用border绘制三角形

使用border绘制三角形的思路,就是border值设置一个很大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht