给div一个渐变边框

2024-11-08

css：设置div边框透明+渐变

写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+渐变边框.但是,又不能不做是不是,费了一番心思查资料,下面是解决方案: 1.分成两个div叠加的形式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

1.滚动条的变相隐藏思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把div的滚动条挤出去,并把div的横向超出部分隐藏掉,就可以实现没有滚动条也可以滚动的效果 <html> <style> *{ //边距清零 margin: 0; padding: 0; } //隐藏body的滚动条(会没有滚动效果) .scroll{ overflow-x: hidde

css3 实现渐变边框

(1)一个渐变的底边线border:1px solid transparent;border-image: -webkit-linear-gradient(right, #FF9848,#FF2A2B) 1 1;border-image: -o-linear-gradient(right, #FF9848,#FF2A2B) 1 1;border-image: linear-gradient(to right, #FF9848,#FF2A2B) 1 1;border-image-slice:0 0

图片在IE8浏览器多一个有边框问题解决办法

最后在网上找了一下答案,IE8浏览器图片多一个有色边框,而Chrome浏览器没有边框的解决办法. 指定img的边框样式: img{border-style:none;}

如何实现一个无边框Form的移动和改变大小（一）

很多时候我们不希望使用Windows提供的窗体. 我们希望使用一个无边框的窗体,什么border,caption透明就行了. 下面我们来说下一些实现方法. 这个方法要求窗体自定义的border size, 需要使用Form的Padding来实现例如设置Padding = 5, 则Form的四周有一个5像素的border.如下图: 可以看到内框外面还有5个像素的蓝色窗体. 如果你喜欢这种方式的话,恭喜你,这个实现及其简单. 首先我们实现窗体四周的放大缩小你只需要在你的窗体中重写WndProc,

JS---案例：点击按钮设置div背景色渐变

案例:点击按钮设置div背景色渐变背景色渐变:设置透明度 <div id="dv"></div> <input type="button" value="渐变" id="btn" /> <script src="common.js"></script> <script> my$("btn").onclick = f

css实现div左侧突出一个带边框的三角形

.vip-control-header{ width: 600px; height: auto; background: #F8F8F8; border: 1px solid #e2e2e2; padding: 10px 0 10px 10px; position: relative; border-radius: 5px;}.vip-control-header:before,.vip-control-header:after{ position: absolute; content: " &

【转】CSS设置DIV背景色渐变显示

[原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColo

div四个边框分别设置阴影样式

对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影.昨天项目中碰到了这个问题,就认真想了一下,在此总结一二. 首先,还是从官方解释说起. 网上的解释通常都是什么水平阴影长度.垂直阴影长度,略抽象.根据我的实验和理解,从坐标层面来理解比较直观,那么我们首先建立如下直角坐标系:(突然发现我的电脑上竟然没有装Visio,现学现卖用PS临时画了一个,原谅我) OK.原点为基点,原点左侧为x轴负方向,值为负,右侧为正:原点下方为y轴正方向,值为正,上方为负.如上图箭头所指.好理

CSS设置DIV背景色渐变显示

本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE

UIImage类扩展返回一个带边框的圆形图片

/** * 将image转换为圆型带边框的图片(最好写一个UIImage的类扩展) * * @param name 图片的名字 * @param borderWidth 外层边框的宽度 * @param borderColor 外层边框的颜色 * * @return 返回已经处理好的圆形图片 */ + (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(U

DIV+CSS颜色边框背景等样式

1.使用css缩写使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中,不要交错使用全写和缩写的颜色配置,在系统资源极低时,会导致浏览器渲染失败. 盒尺寸通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1:

如何实现一个无边框Form的移动和改变大小（二）

接着上文:这里写链接内容我们来说说一个比较复杂的实现, 效果如图: 注意为了能够凸显没有NC(NotClient)区域,我们额外用了3个panel分别放在窗体的左右和下部.用来模拟客户自己的控件. 下面我们说下这种真正的无边框Form的实现方法下面先无责任的贴下代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawi

今天介绍一个渐变的方法，在shell里面自动生成注释简介

在编辑sh脚本时,我经常在shell中写一些注释.今天我介绍一种渐变方法,它可以在每次vim shell脚本时自动在shell中生成注释和其他信息. 让我们共享一个shell脚本模板文件,将其复制到用户的主目录并将其命名为.vimrc名称,以便我们在打开以.sh结尾的文件时自动生成一些注释信息,只需稍微修改即可. 这很方便吗?让我们为您分享代码,然后将以下文件粘贴到您自己的要求中,并根据您自己的要求进行更改.保存并退出. 编辑后,我发现ls看不到这个文件,因为它变成了一个隐藏文件,可以查看ll

QT: 如何移动和缩放一个无边框窗口

一个QT窗口如下可以做到无边框: Window { id: window //Designer 竟然不支持..., 设计模式时要注意 flags: Qt.FramelessWindowHint width: 500 height: 300 title: "Window Title" } 不过要注意, 这样QT Designer不支持, 在设计的时候可以先注释掉, 最后在打开. 一旦设置了FramelessWindowHint, 系统就不管你这个窗口的移动和缩放了, 就需要自己来处理了.

table中某一个tr边框样式设置

<html> <head> <style type="text/css"> table{ width:500px; } table tr td{ border-top:#FF0000 solid 1px; width:%; background-color:#00CC33; text-align:center; line-height:24px;} </style> </head> <table border="

CSS设置DIV背景色渐变

div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/ background: -ms-linear-gradient(top, #AC07BD, #f6f6f8); /* IE 10 */ background:-moz-linear-g

创建一个没有边框的并添加自定义文字的UISegmentedControl

//个性推荐歌单主播电台排行榜 NSArray* promoteArray=@[@"个性推荐",@"歌单",@"主播电台",@"排行榜"]; UISegmentedControl* promoteSgement=[[UISegmentedControl alloc]initWithItems:promoteArray]; promoteSgement.frame=CGRectMake(, , screenWidth, )

DIV+CSS圆角边框

简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <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-left:1px solid #999;border-right:1

ios 给view添加一个渐变的背景色

CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init]; gradientLayer.colors = @[(__bridge id)mRGBToColor(0xff8800).CGColor,(__bridge id)mRGBToColor(0xff5100).CGColor]; //位置x,y 自己根据需求进行设置使其从不同位置进行渐变 gradientLayer.startPoint = CGPointMa

上下两个div, 一个固定高度, 另一个铺满屏幕

<div class="box"> <div class="el1"></div> <div class="el2"></div> </div> .box {width:200px;height:500px;background:red;display:flex;flex-direction:column;} .el1 {height:100px;background:gre

给div一个渐变边框

热门专题