i am building a page, and in the css i set a border of 1 pixel. But in the frontend, the border-height is incosistent.
The last border stripe is definitley bigger then the others.Does anybody know why this is?
CSS: border: 1px solid rgba(0,0,0,.125)
You can try with the property outline.
outline: 1px solid rgba(0,0,0,.125);
Related
I can change the top, left, right and bottom of borders using the setStyleSheet funcion:
self.button1.setStyleSheet("""border-bottom: 1px solid #654321; border-top: 1px solid #123456""")
and this creates a button like so:
However is it possible to create borders like the one below using qss stylesheets:
Where the bottom border in only not starting at the very edge.
Well, it is possible, but only whenever the following aspects are respected and considered:
both vertical borders are always explicitly hidden (border-left and border-right are set to none);
the border radius is only specified for the bottom corners, and it only sets the horizontal radius, while leaving the vertical one to 0;
this is a "hack" that specifically uses geometry aspects and only works if the above are respected;
bottomMargin = 24
self.button1.setStyleSheet("""
QAbstractButton {{
border: 1px solid black;
border-left: none;
border-right: none;
border-bottom-left-radius: {margin}px 0;
border-bottom-right-radius: {margin}px 0;
}}
""".format(margin=bottomMargin)
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
i have a table in a minesweeper browser game im making, in which clicked cells have a "dotted" border, which it then shares with nerby dotted cells. and unclicked ones have a "outset" border, which is not shared. that is exactly what i want, however the problem is the sizing is off as a result, because the sizing of dotted cells varies, and outset cells have a steady size. is it possible to make such a table look normal?
here is my code to help you understand the problem
unclicked box
.box{
border: 3px outset #959595;
width:25px;
height: 25px;
}
clicked box
.zero{
border: 1px dotted #000000;
width:26px;
height: 26px;
}
here is a link if it helps
I have been searching in goole how to create and arrow and box with css only. I have found an almost perfect example here:-
http://dabblet.com/gist/4639593
How can I change this code so the arrow points left and not right?
I have tried a few things but just get a diamond shape pointing left!
Thanks
change .shape:after's margin to -24px 220px
remove border-top & border-right for .shape:after
add the following borders for .shape:after border-bottom: solid 1px #ccc; & border-left: solid 1px #ccc;
here the final result: http://dabblet.com/gist/5648799
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.