小编Sta*_*uck的帖子
如何通过 CSS 创建带有渐变色条纹边框的矩形？
我想用渐变色条纹边框创建圆边矩形。
我想使用img标签或div标签来包含图像和渐变条纹边框。
这是它需要的样子：
我尝试四处搜索，发现（SCSS）示例：https ://jsfiddle.net/rami7250/yujsz7wf/
我得到了这个 SCSS 代码：
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
/*animation: widen 10s linear alternate infinite;*/
}
.stripe-1 {
color: white;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
如您所见，该功能仅影响background而不是border。
如何通过 CSS/SCSS 使该矩形在其边框中显示渐变色条纹？
推荐指数
解决办法
查看次数
如何强制div出现在另一个div下面
我有两个div,一个出现在右边,另一个出现在左边.
但是,当我尝试在右侧div下添加一个div时,我会在左侧div或左侧div的左下方获取它.
这是我有的:
这就是我想要实现的目标:
我试过几种方法包括:
- 明确:左; 或明确:两者
- list-style:none;
- 使用位置:相对;
- 也看到了那个方法,但不能弄清楚这一点
我在stackoverflow搜索时看到的另一种方法却没有成功.
这是一个现场的:JSfiddle
我该如何解决这个问题？
/*============================================================================================*/
/* 1. GENERAL TYPOGRAPHY */
/*============================================================================================*/
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/
body {background:url(../img/body_image_1.png) top no-repeat}
html, body, div, span, iframe,pre, a, img, strong, center, ul, li, footer, header,menu {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
footer, header, menu {
display: block;}
body {
line-height: 1; }
ol, ul {
list-style: none; }
html { font-size: …推荐指数
解决办法
查看次数
将Ebay Link Generator结果转换为bitly.com链接
我管理了一个小的PHP脚本,它将搜索到的ebay产品并将其转换为推广ebay链接.
它就像那样 - 用户搜索例如:ocz vertex
点击"提交"并获得结果:
http://rover.ebay.com/rover/1/711-53200-19255-0/1?icep_ff3=10&pub=5575165347&toolid=10001&campid=5337851510&customid=&icep_uq=ocz vertex&icep_sellerId =&icep_ex_kw =&icep_sortBy = 15&icep_catId =&icep_minPrice =&icep_maxPrice =&ipn = psmain&icep_vectorid = 229466&KWID = 902099&MTID = 824&千瓦= LG
(无法修复ocz和顶点字之间生成的链接中的空格)
现在,结果很好,但我想通过bitly.com帐户使用他们的API来缩短它.
基本上我希望它生成并将完整的ebay链接结果转换为小的bitly.com链接(例如http://ebay.to/2scU91k)并在我的帐户上看到该链接.
过程就是这样:用户搜索像ocz vertex这样的术语 - >点击"提交" - >获取ebay.to短链接(当真正的进程在后台时,转换为rover.ebay.com地址然后再到ebay .使用我的bitly.com凭据)
我发现这和说,特别是,但没得到我如何实施的结果作为一个新的bitly转换.
这是PHP代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/screen.css">
<style type="text/css">
body{
margin:0px;
font-size:0.7em;
font-family:trebuchet ms;
color:#222;
}
#mainContainer{
width:840px;
margin:5px;
}
table,tr,td{
vertical-align:top;
}
.textInput{ …推荐指数
解决办法
查看次数
如何设置按钮和按钮悬停以保持内联？
有一个小的按钮 CSS 悬停，当我用鼠标光标悬停时，我看到悬停移动并更改按钮内联顺序。
我拥有的：
我想要的是：
我尝试使用display:inline-block;但没有成功。
见下面的片段
.btn {
background-color: #ddd;
border: none;
color: black;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition: 0.3s;
cursor:pointer;
display:inline-block;
}
.btn:hover {
padding: 30px;
padding-left: 50px;
padding-right: 50px;
background-color: #eb1269;
color: white;
display:inline-block;
}<h2>Fading Buttons - "Fade in Effect"</h2>
<button class="btn">Hover Over Me</button>
<button class="btn">Hover Over Me</button>
<button class="btn">Hover Over Me</button>推荐指数
解决办法
查看次数