div加边框

一、虚线与实线边框

边框虚线样式:dashed
边框实现样式:solid

border:1px dashed #000
代表设置对象边框宽度为1px黑色虚线边框

border:1px solid #000
代表设置对象边框宽度为1px黑色实现边框

二、对div上边加边框

我们给div上边加1px黑色边框

  1. div{border-top:1px solid #000}

三、给div底部加边框

给div盒子底部加2px虚线红色边框

  1. div{border-bottom:2px dashed #F00}

四、在div盒子左侧加边框

给一个css选择器 css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框

  1. .divcss5{ border-left:1px solid #00F}

DIV代码:

  1. <div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>

五、在盒子div右侧加边框

div对象右侧加1px红色实线边框

  1. div{ border-right:1px solid #F00}

六、在盒子上下加边框

给盒子上下加1px实现黑色边框

  1. div{border-top:1px solid #000;border-bottom:1px solid #000}

七、给div盒子左右加边框

给盒子左右加2px虚线绿色边框

  1. div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}

八、给div四边加上一个边框

给一个DIV四边加上3px实现黑色边框

  1. div{ border:3px solid #000}
时间: 2024-12-28 21:49:43

div加边框的相关文章

hover效果加边框不抖动

前两天遇到一个hover效果给整个div加边框的问题. html 如下  <div class="hot-recommend">         <div class="wrapper">             <div class="offer-list">                 <ul class='underline'>                     <li cla

鼠标悬浮给图片加边框,适合大型展示

鼠标悬浮给图片加边框 html代码 <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href="" class="a2"> &

CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:

多行图片hover加边框兼容IE7+

问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ 注意: IE11以下浏览器加载图片会默认给它加一个1px的边框 解决方法:对图片设置border:none ============================================================= hover加边框解决方案: 原先: <li> <img /&

clip-path 加边框border

最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考 下图是设计图 如下是实现方案(就是写两层,外面一层灰色,里面一层白色覆盖) <template> <section class="moveCompanyLimits"> <div class="tabBar"> <div class="tabBar_border&qu

jQuery - 点击图片加边框

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>为图片添加边框</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <scrip

android TextView加边框

为TextView加边框,需要在drawable建xml文件,里面设置shape来设置文本框的特殊效果. <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 实心 --> <solid android:color="@andr

PHP 给图片加边框

/** * 给图片加边框 by liangjian 2014-06-19 * @param $ImgUrl 图片地址 * @param $SavePath 新图片保存路径 * @param $px 边框像素 * @return Ambigous <boolean, 新图片的路径> */ function ImageAddBoard($ImgUrl, $SavePath, $px = 2) { $aPathInfo = pathinfo ( $ImgUrl ); // 文件名 $sFileNam

Div圆角边框的实现例子+代码

<html> <head> <title>Div圆角边框的实现例子</title> <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-l