相关疑难解决方法(0)
如何使用CSS制作透明边框？
我正在尝试为拥有博客的客户做类似的事情.
她想要一个半透明的边框.我知道这可能只是一个背景.但我似乎无法找到横幅这种css技术背后的逻辑/代码.有人知道怎么做这个吗？这将是一个很大的帮助,因为这是我的客户想要为他的博客实现的外观....
推荐指数
解决办法
查看次数
CSS RGBA边框/背景alpha double
我正在开发一个涉及很多透明度的网站,我想我会尝试在RGBA中完全构建它,然后为IE做后备.我需要一个"facebox"风格的边框效果,其中外边框是圆形的,并且比它所包围的框的背景更不透明.
来自http://24ways.org/2009/working-with-rgba-colour的最后一个例子似乎暗示它是可能的,但我似乎无法让它发挥作用.当我尝试以下内容时:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>RGBA Test</title>
<style type='text/css'>
body {
background: #000;
color: #fff;
}
#container {
width: 700px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
border: 10px solid rgba(255, 255, 255, 0.1);
padding: 20px;
}
</style>
</head>
<body>
<div id='container'>
This should look like a facebox.
</div>
</body></html>
看起来背景"延伸"在元素的边界下面,这导致像素值被加在一起.因此,当背景和边界都是半透明时,边框总是比元素的背景更不透明.这与我想要实现的完全相反,但似乎应该可以基于我见过的例子.
我还应该补充一点,我不能在容器中使用另一个元素,因为我也将在容器上使用border-radius来获得圆角,如果它们有背景,webkit会对子元素的角进行平方已分配,这实际上意味着带有方形内容的圆形外边框.
对不起,我无法发布此图片...显然我没有足够的代表发布图片.
推荐指数
解决办法
查看次数
使两个CSS元素并排填充其容器,并排
我想要两个元素占据父元素宽度的精确百分比,但我也需要它们的边距让它们分开.我有以下标记:
<div class='wrap'>
<div class='element'>HELLO</div><div class='element'>WORLD</div>
</div>?
.wrap {
background:red;
white-space:nowrap;
width:300px;
}
.element {
background:#009; color:#cef; text-align:center;
display:inline-block;
width:50%;
margin:4px;
}
正如您在http://jsfiddle.net/NTE2Q/中看到的那样,结果是子节点溢出了包装器:
我怎样才能让它们适应空间？可悲的是,box-sizing:margin-box这种情况没有.
推荐指数
解决办法
查看次数
"不透明度"边框为"不透明度"元素
鉴于这个HTML
<div id="my_div">
</div>
CSS
#my_div {
width: 100px;
height: 100px;
background-color: #0f0;
opacity: 0.4;
border: 3px solid #ff0000;
}
我想要自己的div标签opacity,但也不需要边框.
css可以为"不透明度"元素制作"非不透明"边框吗？
推荐指数
解决办法
查看次数
具有不透明度的currentColor
有没有一种方法可以更改设置为从其继承颜色的边框的不透明度currentColor？即继承currentColor中#inner2，并设置它的不透明0.25。
请寻找一个纯粹的css解决方案。
例如，类似于以下内容的内容：
#outer{
color: rgba(255,0,0,1);
}
.inner{
display: block;
width: 100%;
height: 10px;
margin-bottom: 5px;
border: 2px solid currentColor;
}
#inner2{
/* This is where I want to inherit current color */
/* ... but still set it to 0.25 opacity */
border-color: rgba(255,0,0,0.25);
}<div id='outer'>
<div id='inner1' class='inner'></div>
<div id='inner2' class='inner'></div>
</div>推荐指数
解决办法
查看次数